My current job has me handling a few things:
Improve our site’s accessibility standards
Help people debug CSS issues, mostly Flexbox ones
During a full moon, watch for movement from the headless manikins our CEO bought
These all matter, but the most important one isn’t here: making and managing a system for our front-end assets. When I arrived our current one was a scattered collection of assets mixed with Bootstrap. We wanted one with better style documentation, component organization, and less dependence on frameworks.
It took a few tries, but ultimately I landed on a system that meets most of our needs. It relies on what I call a SubAtomic Frontend Architecture or SAFA for managing styling. We’ve been slowly integrating it into old projects, and a new one uses it for the entire frontend.
I’m happy/relieved/tempting fate to say it’s been mostly well-received and helped us avoid common front-end troubles like:
Style at scale
Back-end focused engineers not knowing what the hell to do
That’s why I wrote this post to describe this SubAtomic approach. My hopes are you take inspiration, try it yourself, give me credit, and I can ultimately have a small web development book deal as I ride into the sunset.
So join me in my quest and read onward!
What is a SubAtomic Frontend Architecture?
What I call a SAFA is basically writing CSS with 80% Atomic CSS, and 20% BEM (mostly Atomic, so it’s SubAtomic, get it?). Writing the front-end this way has a few key steps:
1. Get, or Build, an Atomic CSS Framework
For those who don’t know, Atomic CSS is building styles entirely (or mostly so) with helper classes. I won’t go into the details (or controversy) here, but I refer you to this presentation making the case for Atomic CSS. I will say I was skeptical at first, but I and everyone I recommended it to have come around to it.
Our system uses a custom collection of helper classes since we wanted to avoid past dependency issues. If you’re not restricted by that, TailwindCSS and Tachyons are popular options. At least see how these frameworks handle variables, responsive classes, and what styles to cover. There are a few parts of our current one I’d change based on how I saw Tailwind handling them now.
2. Build Your Site Using Atomic CSS Whenever Possible
Once the atomic classes are in place, get started and use them wherever possible! I’ve found the markup for many components can be written entirely with Atomic CSS, and can partially style the rest. So proper atomic styling saves a lot of time in the long run.
Let’s look at my personal site as an example, which uses Tailwind. Here’s the old footer markup styled only with helper classes.