Comment by PaulHoule

Well the `!important` is a good example if general misunderstanding of the core basics of the CSS: the cascade. People usually think it means something like "override everything what was declared up until now in a way I don't need to check the selector specificity", while in reality it means *"teleport this certain declaration to the higher mirror cascade origin realm"*, what is way cooler yet mostly unknown concept of CSS.

    There are _Browser_ styles, that are overridden by parts of —
    — _User_ styles, that are overridden by parts of —
    — _Author_ Styles, that are overridden by —
    — !important parts of _Author_ Styles, that are overridden by —
    — !important parts of _User_ Styles, that are overridden by —
    — !important parts of _Browser_ Styles.

What is a neat mechanism, isn't it? The "weakest" can have the last word here.

Sadly neglected concept of the web standards is that they were conceived not as rigid projectors of what authors create, but as a platform where individual user agents process authors' contents and negotiate the way how their users want to consume it. One of the first Håkon Wium Lie's CSS proposals even had some "weights" for individual attributes, so that user could express "I prefer serif fonts for headings this much" and author could express that "I suggest this sans serif font for heading with such weight, but it is not so important and my content will make sense in different font faces as well, but it is crucial that this particular text will be slanted, otherwise user would miss important aspect of information."

-- https://www.w3.org/People/howcome/p/cascade.html

Kind of hard to see Bootstrap and Tailwind so casually lumped together with regard to how they break semantics, as they are at least an order of magnitude apart in that. Bootstrap will throw in a p-0, but Tailwind is designed to essentially make everything a p-0.

And that's an important distinction, as I think the current challenge with CSS for designers (and everyone) is that it now sits between design and development. That is, we've long departed the document model use case, wherein you're simply laying out a static Website that you just want to be consistently styled across pages and easily changeable (perhaps the optimal semantic use case).

We now build apps wherein we encourage essentially inline styles to be co-located with components. That itself is a complete rejection of the semantic CSS model. And it's exactly why Tailwind—being explicit about its purpose in an application development context—goes that order of magnitude beyond Bootstrap.

But, how does a designer work semantically in this context?

I think there are a lot of things wrong with Web development these days and styling at the component level is an example of one. Tailwind is the right tool for the wrong job. It solves a problem that shouldn't exist. And, in doing so, tempts some to believe CSS is the problem.

Edit: Don't get me wrong. CSS has its own problems and a good number of them. But it can't be blamed for not being used semantically in the current Web development environment.

> Thus we get a lot of things like bootstrap and tailwind that erode the idea of CSS classes being somewhat semantic

If everyone is using CSS wrong, then I think that's pretty good evidence that the design is flawed. The semantic/cascade model has proven to be challenging for designers (as you suggest in your comment), difficult to maintain (inheriting a mess of somebody else's CSS is a nightmare), and counter to the component-based encapsulation that seems to be the trend in modern web dev patterns.

`!important` was our ultimate weapon designing unbreakable embeddable widgets that other sites will drop in to their webpages at their whims.

> Thus we get a lot of things like bootstrap and tailwind that erode the idea of CSS classes being somewhat semantic

Can you link to somewhere explaining why and how CSS is meant to be semantic? Search bots and screen readers don't read or use class names. They expect certain semantics from HTML tag names and HTML attribute names though.

I think this is mixing up something that is really only meant to be a convenience for developers here.

Tailwind would advocate you wrap up common styles within a web component so the web component filename would take the place of a class name so there's not much difference for developers. Lots of styling is purely decorative as well and doesn't have semantics so there isn't always a useful name to provide e.g. `gallery-container-wrapper` isn't telling you much.