Here's my weird opinion on html/css/general styling of websites:
The biggest problem with CSS is it's one language that's trying to do two things. I think that layout (grid, flex, anything that changes the shape of the page) and style (font, color, text sizes, etc...) are two separate things, and CSS makes it incredibly tempting to try to do both of those at the same time, which inevitably causes trouble.
Working on a website is easier when you can break those two things out into separate concepts. People love to praise/hate tailwind, but I think the best use for it is specifically for modifying layout. Layout changes deserve to be built right into the HTML itself because that's where you're looking when you need to reason about it, whereas style is more general and should be broken out into actual CSS rules to keep it more consistent across a site. Layout is much more directly tied to context than style is, at least as soon as you get into anything non-trivial. There really needs to be a better way to segment these two concepts.
At least, that's my hot take as a semi-passable css user.
It's both HTML and CSS, though. HTML is also bleeding over the boundary between layout and document.
HTML was mean to _be_ the document. CSS was meant to be a language for styling and re-styling those documents. That makes sense in the logic of decades past. You might have a bunch of documents, and go re-style them all when you move. Or a company might do this when they change their logo or get acquired.
But for a long time now almost every HTML document served on the web has long been a mix of design elements and one or more things that a human would call distinct documents, and CSS has kept up with styling those.
With a true "document", it's pretty sane to expect that you can readily style and re-style the same document with different stylesheets for different contexts without needing to go fiddle content. With full complex designs implemented in HTML, the HTML and CSS for at least those parts tend to be very tightly coupled and very likely to get rewritten together.
The fuzzy boundary between the content and the layout are a problem for both HTML and CSS.
It confirms my issue with using tailwind. I like it! But as you mentioned “style” typically has a global, systematic, component based notion, and not a hierarchical one.
A perfect example is typography AKA font style and color. Yes, it has a structural/hierarchical notion, but only on an abstract component level.
Typography almost _always_ comes in aggregates. Font size, line height and more, even margins - they are very rarely orthogonal and composable.
Designers typically take great care to fine tune these things as components. Ask a designer to disentangle then into tokens and you get a very weird look!
On the structural level you want meaningful component classes to refer to them and maybe one or two modifier classes, if at all.
Thankfully tailwind offers @apply, so you can still leverage some definitions where it makes sense.
The biggest problem with CSS is it's one language that's trying to do two things. I think that layout (grid, flex, anything that changes the shape of the page) and style (font, color, text sizes, etc...) are two separate things, and CSS makes it incredibly tempting to try to do both of those at the same time, which inevitably causes trouble.
Working on a website is easier when you can break those two things out into separate concepts. People love to praise/hate tailwind, but I think the best use for it is specifically for modifying layout. Layout changes deserve to be built right into the HTML itself because that's where you're looking when you need to reason about it, whereas style is more general and should be broken out into actual CSS rules to keep it more consistent across a site. Layout is much more directly tied to context than style is, at least as soon as you get into anything non-trivial. There really needs to be a better way to segment these two concepts.
At least, that's my hot take as a semi-passable css user.