Is 2016 the year of Atomic CSS?

If you are familiar with Brad Frost's Atomic Design or Pattern Lab you're probably wondering how it can be applied to a website layout styling language like CSS since; it's not really as structured as other programming languages, and all examples of Atomic Design involve the organisation of HTML.

However, if you've actually applied the Pattern Lab web style guide to a project you'll quickly discover anything that can be broken down to basic reusable code can be subject to Atomic Design.

This has inevitably found its way to CSS and has lead to the rise of something called Atomic CSS (ACSS). ACSS has been around for a while, but didn't really get much traction until early 2015 and it's increasing in popularity.

So – what Atomic CSS?

ACSS is a method of using one class for one CSS property so that same property can be used in different parts of a site. This eliminates the possibility of duplicating that property in the stylesheet since the class itself is being used multiple times in the HTML. This results in smaller, 'drier' stylesheets, and is also a great way to quick way prototype layout and components on a web page.

This usually results in the use of multiple CSS classes on a HTML element similar to what's shown below:

<div class="fz(2em) c($custom-blue) mt(1.5em)">
Text
</div>

The syntax above might give shock you a little as you've probably never seen brackets used for CSS class names before and might look unnecessary but it makes sense for complex atomic classes like pseudo classes and media queries. This isn't the canon way to write atomic classes but it's the best way I've found so far.

Using brackets for class names

In order for the browser to read brackets in the class names, they need to be escaped in CSS. I don't want to talk too much about escaping characters in this article but it's a simple method that involves placing a back slash \ before the character you want to escape. If we wanted to create an atomic class out of the property text-transform: uppercase, the class in HTML would look like his, tt(u) and this in CSS .tt\(u\). All modern browsers support escaping characters in CSS, however I believe IE8 has some issues with it. If you would like to know more I suggest reading this article by Mathias Bynens.

Another benefit including brackets in your atomic css class names is it clearly separates them from your non atomic classes both because of the brackets and because it's best practise to namespace classes. Harry Roberts wrote a great article on namespacing classes and I myself have come up with a methodology for reusable components with namespacing classes. As mentioned before however, you can write atomic classes however you want.

So what about BEM?

In my opinion atomic classes should be used only for properties that will be reused throughout the site, for properties you know will not be changed it's fine to stick with BEM, or whatever naming convention you are comfortable with. Say for example you have a default input box style for your site, I see no issue in using BEM for that class name and adding atomic classes after that. So for example:

<div class="c-form__input"></div>

Could have the properties:

.c-form__input {
  border-radius: 2px;
  border: 1px solid #555;
  color: white;
  height: 30px;
}

These properties make up the base state of the input element, additional states such as success or error could have atomic classes added to them.

.bd\(green\) { background: green }

.bd\(red\) { background: red }

<div class="c-form__input bd(green)"></div>
<!-- for success -->
<div class="c-form__input bd(red)"></div>
<!-- for error -->

What's the different between inline styles and ACSS

In short, there isn't much of a difference, however using inline CSS for each element might cause one to repeat properties whereas with acss, a property is only written once. I still recommend inlining critical css but not adding properties to elements if they will be used over and over again.

Will this cause bloat in CSS

ACSS can cause bloat if there are unused classes. You can avoid this by using a tool such as uncss or purify CSS to removed unused styles for production. The best tool for ACSS however is Atomizer by Yahoo which reads the atomic classes used in a document (or several all documents) and automatically adds the relevant CSS to your destination file. Atomizer works with gulp and grunt which means it's easy to add as one of your frontend processes.

How can I convince my superiors to use this technique?

Not only are there large well know companies such as Yahoo and Mailchimp that already use ACSS in their production code but if you're a believer in Object Orientated CSS (OOCSS) it ACSS makes more sense as it further modularises your code.

I consider Atomic CSS (not to be confused with Atomic Design) to represent OOCSS taken the the nth-degree.

– Ben Frain

Conclusion

I'm a strong believer in ACSS and don't believe I could ever go back to creating a web based project without it. I am yet to try it alongside something like Radium for React, and I am yet to see how different it is to CSS Modules, but if you currently aren't using those tools (and even if you are) I'm sure you'll find it to be a very beneficial way to make your CSS properties reusable.