Atomic CSS

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:

and part of the css: