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: