Let’s Define Exactly What Atomic CSS is

Avatar of John Polacek
John Polacek on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

As Atomic CSS (also known as Functional CSS) has been gaining in popularity, some confusion has occurred about similar related terms. The goal of this article is to clarify this terminology.

There are other projects that use the term Atomic, including Atomic Web Design by Brad Frost. Atomic CSS is a completely separate concept from these.

Let’s start by defining Atomic CSS:

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

There are different ways to write Atomic CSS (see variations below). One example would be this:

.bgr-blue { 
  background-color: #357edd; 
}

The term “Atomic CSS” was coined by Thierry Koblenz in his foundational article “Challenging CSS Best Practices” in October 2013.

Some people started referring to this approach as “Functional CSS” some time later. Though there have been cases in the past where Functional CSS has been used to describe something else, today the terms Functional CSS and Atomic CSS are used interchangeably.

While Atomic CSS has been the title of an open source project which originated with Thierry’s original article, the term itself applies to the architectural philosophy, not any one particular variation (see below).

Variations of Atomic CSS

Static

Many people write Atomic CSS much like they have always written CSS. 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.

The advantage to this style is that because it is familiar, it has a lower barrier to entry, and is more easily understood by those who are not well-versed in CSS.

Programmatic

The Programmatic approach to Atomic CSS involves using a build tool to automatically generate styles based on what it finds in the HTML.

For example, given this:

<!-- Programmatic Atomic CSS Example -->
<div class="Bgc(#0280ae) C(#fff) P(20px)">Lorem ipsum</div>

The following CSS would be generated:

.Bgc\(#0280ae\) { background-color: #0280ae; }
.C\(#fff\) { color: #fff; }
.P\(20px\) { padding: 20px; }

This flavor of Atomic CSS uses the syntax of a function call with parameters. As demonstrated by the open source ACSS project, which uses Atomizer to programmatically generate styles, it is no longer necessary to write CSS whatsoever. Stylesheets that are generated during the build process are fully optimized with no unused styles of any sort.

Longhand/Shorthand

The longhand style favors more readable class names (see Expressive CSS and Solid), while shorthand favors brevity (see Tachyons and Basscss).

/* Shorthand Atomic CSS Examples */

.bg-blue { background-color: #357edd; } 
.f1 { font-size: 3rem; }
.ma0 { margin: 0; }

/* Longhand Atomic CSS Examples */

.bgr-blue { background-color: #357edd; }
.background-blue  { background-color: #357edd; }
.backgroundcolor-blue  { background-color: #357edd; }
.text-h1 { font-size: 3rem; }
.text-3rem { font-size: 3rem; }
.text-huge { font-size: 3rem; }
.fontsize-1 { font-size: 3rem; }
.marg-0 { margin: 0; }
.margin-0 { margin: 0; }

/* Programmatic Shorthand */

Bgc(#357edd) { background-color: #357edd; }

/* Programmatic Longhand */

bgrBlue(#357edd) { background-color: #357edd; }
backgroundBlue(#357edd) { background-color: #357edd; }
backgroundColorBlue(#357edd) { background-color: #357edd; }

Utility Classes

Utility classes (also referred to as Helper Classes) are easily understood, single function classes that help with common styling patterns (e.g. .clearfix, .hidden).

Many CSS architectures rely on utility classes (e.g. grids, spacing, typography) but do not necessarily fully embrace the concept of Atomic CSS.

Immutable CSS

An aspect of Atomic/Functional CSS where utility classes are never to be modified, thus producing highly dependable results.

Immutability plays an essential role in the proper execution of Atomic CSS architecture. Without it, you risk this:

.black {color:navy;}

Atomic CSS is about shifting complexity away from stylesheets and into HTML. When design changes occur in a Atomic CSS project, it is best if you have well-structured HTML templates so that, for example, you can use an editing tool to quickly change Bgc(colorOne) to Bgc(colorTwo) wherever you may need to.

Breakpoint Prefixing

This technique is a way to allow utility classes to override styles at different breakpoints to make implementation of responsive web design simple and efficient.

/* Examples of breakpoint prefixing */

.grid-12   /* Full width by default */
.m-grid-6  /* 2 column at medium screen sizes */
.l-grid-4  /* 3 column for large screen sizes */

Getting Started

Below is a list of places you can go to begin, depending on which variation you prefer.

Additionally, here are some foundational articles that are worth reading:

“In The Wild”

Atomic CSS has gained in popularity particularly among those who use it for rapid prototyping and, on the other end of the spectrum, for large scale ongoing front end projects.


Thank you to Thierry Koblenz for his feedback on this article and hard work over the years!