The Atomic/Functional CSS Movement

When I published Expressive CSS a few months ago, I knew it would be controversial, and it was (as evidenced in the comments on my Content & Display Patterns with Expressive CSS post). In the time since, there have been many articles and projects published by others that also advocate lightweight, scalable CSS using utility classes that are easy to write and understand.

From what I can tell, Thierry Koblentz was the first to really challenge CSS conventional wisdom with what in 2013 he dubbed the atomic approach. Whether you call it atomic, functional, expressive or something else, people are realizing that for too long we have been stuck in this dogmatic pursuit of semantics which has held us back from crafting CSS in a way that is actually maintainable and scalable.

There are still people who strongly reject this approach (for example, the so-called Maintainable CSS project). A few years ago, I would have been one of those people. Read CSS and Scalability and Rationalizing Functional CSS to understand why companies with large CSS architectures are switching to the Atomic/Functional/Expressive approach.

Here are some recent real world implementations:

Marvel Style Guide Screenshot
Marvel Style Guide

Solid by Buzzfeed Screenshot
Solid by Buzzfeed

When companies publish their frameworks, people often ask why not use an existing framework. Just take bootstrap and fork it. Better yet, use BassCSS or Tachyons.

Well, when you write CSS this way, creating a custom CSS architecture designed exactly for your project’s needs is not that hard and is actually fun. And if you do it right, changing things down the road is no big deal if you are using a CSS preprocessor and HTML templates. That is the benefit of the atomic approach!

Expressive CSS and Using NPM as a Build Tool

Expressive CSS Project PageSeems like every front end web dev eventually publishes a manifesto about their approach to CSS. So here is mine: Expressive CSS

(Shout out to Cole Peters for his Building and Shipping Functional CSS article which offers a similar take and inspired me to finish and publish my project)

One thing I tried that was different for my workflow on projects was to use NPM as my build tool. It always bugged me to have Bower and NPM in my projects when they do very similar things. NPM seems to be the more popular one and it can also somewhat replace Gulp/Grunt as a build tool.

My front end build tool needs for Expressive CSS were pretty basic. I needed to first process the .scss files into unminified CSS files for people who do not want to use SASS to be able to grab (and ignore the SASS files altogether). After that, I would need it to create the minified, source mapped CSS. Also, I added a watch command to enable automatic builds on file saves.

Thanks to node-sass CLI, I was able to configure npm to do exactly what I needed. Here are the relevant lines from package.json:


"scripts": {
    "build": "node-sass css/sass/base.scss css/stylesheets/base.css --style expanded && node-sass css/sass/utilities.scss css/stylesheets/utilities.css --style compact && node-sass css/sass/components.scss css/stylesheets/components.css --style expanded && node-sass css/sass/style.scss css/style.min.css --style compressed",
    "watch": "onchange 'css/sass/**/*' -- npm run build"
},

So, instead of grunt or gulp, we do npm run build and npm run watch.

Pretty simple, eh? For more info on using NPM as a build tool, check out these articles:

UPDATE: The talented folks at Webucator have created a video demonstration of this post:

Check out their YouTube Channel for lots of great training videos.

Simple Responsive Grid

Simple Grid Demo Page on GithubSimple Grid is the responsive grid system I am using on all of my websites these days. View it on Github.

3 years ago I published Extra Strength Responsive Grids, a grid similar to the one in Bootstrap (although we did release ESRG first). My use of the grid has evolved to the point where I wanted to open source this newer, better version.

Simple Grid is similar in function Bootstrap’s grid. The main difference is the inclusion of padding helper classes. Rather than filling up stylesheets with lots of padding declarations, I use these combined with grid classes to handle almost all the spatial arrangements of web pages.

The padding classes also eliminate the need to have .row as a class. With simple grid, you use a .grid-12 with an appropriate padding class applied to it instead of .row.

When I built the ESRG project, the demo page was themed in a humorous way to feel like a sales site for a pain reliever drug. For the Simple Grid demo page, I ditched the silliness and kept it simple and utilitarian. It is probably the smallest stylesheet for a project page that I’ve ever made, just the grid and some CSS to expose the underlying grid scaffolding. No webfonts, colors, images, or styling flourishes, just the business.

Additionally, I have a separate project for the Simple Grid Generator, a SASS mixin that I used to output the Simple Grid CSS. It comes with some different options to customize your own grids, and can also be useful to anyone who wants to see how to make their own SASS grid generator.