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: {
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 [ ] is using it.

A quick look at their html, you see this: html 2016-04-26 html 2016-04-26

and part of the css: atomic css 2016-04-26 atomic css 2016-04-26
BUY ΣJS JavaScript in Depth