So you can have a global css file difficult to maintain and update?
So you can give a stupid class name to every single tag you use in your markup?
So that every time you include third party css there is the risk of confilicts?
So you can use CSS the way it was designed?
> So you can have a global css file difficult to maintain and update?
You know you can have multiple CSS files, right? Plus the code is all in one place and you can refactor it.
> So you can give a stupid class name to every single tag you use in your markup?
No, you give it a good class name. If something is a button, you call it a button rather "grey-rectangle width-500 clickable"
> So that every time you include third party css there is the risk of confilicts?
That's why you name your classes so this doesn't happen?
I assure you that those of us who work on projects where this would not work are not simply bad at naming things and that’s the only reason we picked component based styles.
css was designed to style HTML documents. It was never designed to build rich and scallable apps thus we have all these libraries which fixes a lot of underlining problems.
> "grey-rectangle width-500 clickable"
Oof, this is starting to feel like working with a Microsoft product.
>> So you can use CSS the way it was designed?
This is not a reason why people should not use inline style. Also, CSS was designed 23 years ago. A few things happened in web development since 2 decades.
> No, you give it a good class name. If something is a button, you call it a button
It just doesn't work when your app has 100 buttons. You can introduce a naming methodology like BEM but naming conventions are hard to enforce, annoying to follow, and there are always guys on your team who disagree with them (for bad and good reasons).
This seems to be a thing in the past 5 years or so. I've seen developers refuse to follow the existing coding style simply because there was no lint or prettier rule for it. Like, how fucking hard is it to match the style of the existing code base and not be a dick about it. These are lead and seniors I'm talking about. This is the type of thing junior devs should have learned their first month on the job.
I can't even imagine contributing to an open source project in the '90s or early 2000s and not matching the existing code with whatever I'm doing. I don't care if it's tabs or spaces or whatever variation of if-branch nesting you prefer. When I'm working on code that already exists, I leave my ego at the door and try to make the codebase uniform and coherent.
Hell, the whole reason prettier exists is because we think we can fix these anti-social developers with technology. And of course that doesn't work, so now you need tailwind or whatever.
Nobody is utilizing inline styles in that example. It _looks_ like inline styles but it not. It generates css class name behind the hood which you can override in multiple ways. Starting from the ThemeProvider or just like this:
const Footer = styled.div` ${PrimaryButton} { color: red; } `
I strongly suggest to look at https://styled-system.com/ to better understand the mechanics.