4 ms·

I'm not sure I am missing the point actually. As a class name, `.m-none` is pretty terrible, because it says what the thing looks like rather than what it does.

I'm not sure I am missing the point actually. As a class name, `.m-none` is pretty terrible, because it says what the thing looks like rather than what it does. I can't see how in practice this doesn't lead to a much greater mess, and even in the best case you would end up with .m-none.br-kinda-rounded.p-a-bit.bw-pretty-thicc.bc-old-mauve The clever example in the article with using a loop to define values is not something I find particularly compelling either. The whole point with specifying relative values, e.g., percentages, ems, root ems, etc., is that they can change relative to an element they inherit from or from the root of the document. 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.

cjpearson 5y ago
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.
sodapopcan 5y ago
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.
- aarpmcgee 5y ago
  +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).

cjpearson 5y ago

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.

sodapopcan 5y ago

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.

aarpmcgee 5y ago
+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).