DEV Community

Cover image for How to write better CSS in teams with ACSS — A dynamic Atomic CSS library

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

Kushagra Gour on January 08, 2018

Note: This article was originally published on FreeCodeCamp. Writing good Cascading Style Sheets (CSS) is difficult and it becomes more difficult ...
Read full post
Collapse
 
moopet profile image
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?

Collapse
 
chinchang profile image
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.

Collapse
 
moopet profile image
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).

Thread Thread
 
chinchang profile image
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.

Thread Thread
 
moopet profile image
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.

Collapse
 
thorstenhirsch profile image
Thorsten Hirsch •

What about themes? It looks like you need to duplicate your complete HTML file when using ACSS instead of "just" duplicating your CSS file.

Collapse
 
chinchang profile image
Kushagra Gour •

A major requirement with any atomic library is -> component framework. So is with ACSS also. You need to put each and every independent entity as a separate component so that you don't have to duplicate same HTML and classes again and again. Moreover, ACSS support an external config file where you can store your magic numbers and colors which can be easily modified based on themes - github.com/acss-io/atomizer#api