Atomic CSS

By Xah Lee. Date: . Last updated: .

there's a new trend in CSS, called Atomic CSS.

the idea is this.

here's a traditional CSS:

nav.page {
display:table;
font-size:1.5em;
word-spacing:.3em;
margin:.5em;
padding:.5em;
background-color:yellow;
border-radius:1em;
border:thin solid #b42222
}

Here is the same thing but in Atomic CSS style:

dst {display:table;}
fz15 {font-size:1.5em;}
ws3 {word-spacing:.3em;}
m5 {margin:.5em;}
p5 {padding:.5em;}
bcy {background-color:yellow;}
br1 {border-radius:1em;}
btsr {border:thin solid #b42222}

before, the HTML element have 1 class name. Now, most of your HTML elements will have many class names, 5, 10 or more class names.

The idea is that each class is minizied to just 1 specific style, so that they can be combined together.

proponent say that this actually reduce CSS file size for large websites, and makes it more maintainable.

the recently revamped myyahoo [ https://my.yahoo.com/ ] is using it.

A quick look at their html, you see this:

my.yahoo.com html 2016-04-26
my.yahoo.com html 2016-04-26

and part of the css:

my.yahoo.com atomic css 2016-04-26
my.yahoo.com atomic css 2016-04-26
BUY
ΣJS
JavaScript in Depth