Atomic CSS class names have no semantic information and they are not meant to. If you need a class to describe what an element does, you're free to add one.
The amount of class names is off-putting at first, but you get used to it pretty quickly. (I'd also recommend using numbers or sm, md, lg etc for your size increments, but to each their own.)
Tailwind and friends aren't trying to solve the CSS Zen Garden problem. Their focus is on re-usable CSS rather than re-usable HTML. Depending on your needs that may be better or worse.
Re:Reimagine Atomic CSS
by sodapopcan on Wednesday November 17, 2021 @02:10PM
(#29257470)
Right. The point is to turn what we’ve taught on our head and use CSS to describe what things look like and use components to describe what they do (a component can be a web component, frontend framework component, partial, etc). In fact, using this style of CSS without components is probably not the best experience (but I’ve ne er tried).
As stated in another thread, it’s not necessarily better but it works very well, and I personally find it nicer having everything my component needs in one file.
+1 to this. It makes a lot of sense with a component-based library or framework like React, Svelte, etc. I've never been more productive, and its a bit of a bummer to work on projects that aren't using this kind of thing. I enjoy this general approach whether powered by Tailwind or some style-props based ui library (chakra ui for instance).
Furthermore, using class names is not the only way to achieve the effect in the example you pulled from the article. Sass (and just about any CSS superset from the past decade) can achieve the same with mixins, which would spare the resulting document from all the selector noise.