Atomic CSS with fractures

Write CSS with manually maintained immutability. WCGW

Krisztian Puska

Published on July 10, 2017.Filed under Design Systems, CSS.

Whether you are iterating on a prototype for a client, updating your design portfolio, or building a large scale web product in React, you are facing the same fundamental problems. You want to increase your velocity, write less code, while keeping visual and interactional consistency.

The most valuable promise of immutability in atomic design is that it eliminates unwanted side effects. With single-state, easy to understand helper classes in hand, you are forced to think functionally.

An atomic css library instantly grants you a system that can be scaled, extended and build on.

Fractures is a small, atomic CSS library built by extensibility and accessibility in mind. My main goal was that it should leave the visible UI untouched, enabling other systems to adopt it. Also I wanted to avoid any code pollution, so the whole library is under 3kb, nothing more than the bare minimum. And for good reasons. Besides speed, developer happiness is important even at atomic levels, so the classes are designed as easy-to-remember as possible.

In fractures, utility classes gets their name by the plain function they do, reducing the effort needed to apprehend their purpose. For example, just like CSS grid layout have grid-gap, fractures introduced flex-gap, which works the same way, but on a single dimensional grid. As CSS working group is about to add row-gap and column-gap to flex, this function will just work, keeping that immutable promise we oath to before.

In larger scale applications, having an atomic CSS library is only the beginning. For sustainable product/development costs, you have to invest in your own design system. Without defined constraints, things will soon start to fall apart — that is normal, and is how it should be. It is hard to resist the urge, to carve things into stones, but premature optimization in reality is suboptimal for every system.

Implement reusable elements only when you’ll actually reuse them.

Either you’re rolling your own internal version, or picking a library for your specific needs, investing small at the right time is important. Thinking and working in systems keeps developers, designers and your users happy.

Writing functional CSS is not a new concept, there are quite few stable atomic libraries you can choose from if you find fractures a bit too spartan. One of the oldest and greatest is tachyons, with responsive features, and with the most active user base. For React, there is rebass, with similarly wide scoped features. A few great resources that I think you'll find useful: