This week concludes the third week of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme. I’ve had the opportunity to work on both the frontend for 9cv9 as well as urbanCV thus far. For the past reflections, I have been mainly writing about urbanCV, but on 9cv9’s side, one thing that stood out for me was the usage of Atomic CSS (ACSS).
Atomic CSS (sometimes also known as functional CSS) is a CSS architecture that simply defines a set of classes representing single-purpose styling units. Each class is immutable and applies a single style. This makes it very predictable and reliable as you will always know what it does. There are 2 main variations as shown below.
The first is Programmatic, which involves using a build tool, such as Atomizer, to automatically generate the needed styles. For example the snippet below,
<div class=”Bgc(#0280ae) C(#fff) P(20px)”>Lorem ipsum</div>
generates the following styles, which renders the div as seen below:
.Bgc\(#0280ae\) { background-color: #0280ae; }
.C\(#fff\) { color: #fff; }
.P\(20px\) { padding: 20px; }
The second is Static (which is the style used in 9cv9), where you create classes for each style, each with a single attribute. It is common to use a preprocessor to generate a library of classes with set variations that define a unit-based design system for spacing, color, typography, etc.
.c\:black {
color: black !important;
}
Atomic CSS is for developers who see the benefits of styling “outside of style sheets”, as it allows developers to maintain the components directly instead of the style sheets. Atomic CSS also has a low learning curve and is straightforward to use. While it has the drawback of being tedious to edit, such as in the example of wanting to change all blue divs to green, you would have to manually change all the class names instead of editing the CSS directly, it also has many benefits.
Adopting a Atomic CSS methodology addresses common CSS challenges:
- Changes are predictable
- Because of the single responsibility principle (one class equals one style) it is easy to predict what removing or adding a class will do.
- Scope is limited
- There is no reliance on descendant/contextual selectors as styling is done inside “specificity layers”.
- CSS is lean
- There is very little redundancy and no dead weight (all styles are relevant to the project).
- An interesting fact is Facebook adopted Atomic CSS in 2020 and managed to reduce the CSS on the homepage by a whooping 80%. This is because Atomic CSS has a logarithmic growth curve. It is proportional to the number of unique style declarations rather than to the number of styles and features written, since it can be reused.
- Components are portable
- Classes used to style a component are not specific to that component, hence components can live in any other project that uses it as well.
- Beginner-friendly
- Writing efficient and correct selectors is often one of the hardest parts of CSS for new developers to master. With Atomic CSS, developers don’t create bloat because they don’t write the selectors, instead they mostly re-use existing classes. This can greatly simplify the learning curve for inexperienced developers.
