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

[Ben Sinclair]

It’s definitely as powerful as inline styling but inherits no cons from it.

It inherits all the cons from inline styling.

What if you wanted to change the theme? What if you wanted to implement one of those extra-trendy dark-mode toggles?

... what if you wanted to use the cascade? i.e. the big ol' C in CSS?

[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.