atomify

Automatically atomify your CSS

Why

In my opinion, Brent Jackson nailed it with Basscss. It's a very practical response to CSS modularization, with no bullshit.

The idea of isolating patterns into specific classes and composing them as you wish is simple but really powerful. If you have a solid design foundation, you can literally start iterating without having to make CSS changes whatsoever.

Of course you can achieve that by explaining this concept to both developers and designers and sticking to it. This tool is just an attempt to automate that so you can apply this concept to code bases that already exist.

How it works

Given the following input:

.container {
  width: 100%;
  padding: 3rem;
}

.full-width {
  width: 100%;
}

This tool would output:

.w100 {
  width: 100% !important;
}

.container {
  padding: 3rem;
}

Class name generation

We could have pluggable algorithms to generate the class names (like CSS Modules does), so w100 could be a unique id instead, like _15QFk. This can be also a great way to integrate the output generated by atomify with JavaScript inline styles.

!important

You can opt-out but it's the only way to enforce the concept of immutable styles in CSS.

Usage

$ atomify --help

Usage: atomify input.css > output.css

Options:
  -v    --version           Display current software version
  -h    --help              Display software help and usage details
        --not-so-important  Do not append `!important` at the end of every rule

Questions to be answered

• Is a build tool a good way to approach this?
• How debugging would work?
• How to generate a proper report for the compiled file?
• How to sync dev vs. prod markup?
• How to handle media queries?
• How to use the output with JavaScript inline styles?

Contribute

Feel free to open an issue to give suggestions!