Also to implement hover or other styles, you have to go back to CSS or use JS which is much worse.
Also, it's not CSS, it's inline styles, and you lose the cascading advantage. Say I want every anchor tag on my site to be the same color, without CSS I have to go stick that style on every one individually. Realistically you would make it component, but it's a component that wouldn't need to exist with just one line of CSS.
I'm sure it's possible to write in this way correctly, but every time I've seen it it's been awful. But that probably has more to do with the fact that the devs writing it really didn't care much to write clean styles.
I'm not saying CSS is definitively better, that's just my opinion. But if you are going to advocate inline styles you have to know the trade offs and be able to justify them.
But on the other hand, I often end up with a few "primitive" base components that use CSS-in-JS and reuse these components.
So I have a few components with "inline" styles and the rest uses these components.
For a refactor I simply have to change these components.
What? Components and cascading? Only inline styles make sense if we are talking components. Each component must be self-contained, pure and predictive. Why the hell do we want 90s technology again?
And for me personally, at least for heavy-duty web applications, modular components are far more useful.
It doesn't have to be inline styles. Styled components ( https://www.styled-components.com/ ) inject unique css classes.
CSS-in-JS !== inline styles, at all, yet seems to be a rallying call for people who fear "something different".
But you don't. You have a popup calendar component and none of it's links are supposed to be colored at all.
The problem isn't that anyone is wrong here; it's that there are actually multiple things going on here and depending on where you felt the pain last is where your opinion might fall.
I use a lot of 3rd party components that have their own styling and attempting to affect that globally is disastrous for them.
But I'm also rolling out an entirely new style and layout for all our applications and I'm not changing the code -- it's almost entirely global CSS changes.
Sometimes it's hard to reconcile these two things.
Most people seem to find that, rather than providing the consistent theming it promises, automatic inheritance of properties is confusing and unpredictable.
Better to manage consistency through explicit includes of constants instead.
Of course that is how people have been using less/sass for a decade+ now too.
Of course the result is cleanly written style sheets, but the output is a mass of duplicated code.
In that case your source code is tidy and the mass of duplication in the output is not so bad while accounting for gzip.
It's best to account for cascading and take advantage of it when suitable. But sometimes a project can just get away from you doing that and you may be better off doing what you're saying. It all depends on the project.
Most of the talk on this page about styling components would result in mass duplication of code. But that might be best for their project.
while at the same time you maintain the cascading disadvantages. You can't prevent CSS from cascading unless all your styles are inline, or you've OOCSSed your project so thoroughly that you've used classes to recreate inline styles.