Discussion on: How to write better CSS in teams with ACSS — A dynamic Atomic CSS library

[Kushagra Gour]

Hi Ben! I am not sure what exactly are the issues in that question. But I think what you are referring to can be solved with CSS variables. Plus Atomizer (ACSS) also gives you a JSON config to define variables to use -> github.com/acss-io/atomizer#api

If you could please elaborate on your questions, maybe I can answer better.

[Ben Sinclair]

<button class="Bgc(blue) C(white) P(10px) D(ib) Cur(p) Bgc(red):h">
 I am a button
</button>

Let's say your site gets reskinned to use yellow for buttons that perform destructive actions. You now have to search the whole codebase for instances of <button>, to figure out if they're affected, and to change Bgc(blue) C(white) to use yellow as a background colour and something different as a foreground colour because now it's not contrasting enough.

If you wanted to change it using your stylesheet, you'd need to do this:

Bgc\(blue\) {
  background-color: yellow;
}
Bgc\(blue\).C\(white\) {
  color: black;
}

Conventional stylesheets which use something semantic would let you use either a class (like action-delete) or the hierarchy (like form .actions button).

[Kushagra Gour]

From the article:

It’s hard to write all those same set of classes over and over.
Yes, it is. ACSS says it’s a component based framework. If you are not templating each of your components and are already duplicating HTML, say to create a button every time, ACSS isn’t for you.

For example you should be creating buttons using an abstracted button component like so:

<MyButton primary>Hello World</MyButton>

Hope this clears your doubt.

[Ben Sinclair]

It doesn't, really. If you're making a separate web component for every single thing on your site, like <actionbutton>, resetbutton, <edgecasebutton>, etc, then that seems like a never-ending task.

If you're just templating components, it doesn't make any difference to my argument - you still have to find which component does what and update the templates rather than updating the stylesheet. You have to change all your components rather than apply a theme. You can't switch between themes without re-building and deploying your site, and this all just feels like a massive step backwards.