Understand Atomic CSS in 1 Minute

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's 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:

<html id="Stencil" lang="en-US" class="StencilRoot my3columns myfs-standard ua-ff ua-unknown ua-ff45  l-out Pos-r https my fp-default ltr desktop Desktop bkt999" style="background-color:#93ab9b;">
<head>
    <title>My Yahoo</title>

 <div id="myOuterWrapper" class="Pos-r Themable" >
                <div id="myPageWrapper" class="Ta-start M-a">

                    <div id="myColumns" class="Grid Pos-r">
                                        <div id="applet-container_p1-c1" class="myColumn myColumnNum-c1 Grid-U js-applet-container"  data-applet-container-guid="p1-c1" role="region" aria-label="Section 1" >

and part of the css:

/*! used normalize.css as a starting point - normalize.css v1.0.1 | MIT License | git.io/normalize */html.StencilRoot{font-size:62.5%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
[dir]{text-align:start}
.StencilRoot{/*! used normalize.css as a starting point - normalize.css v1.0.1 | MIT License | git.io/normalize */}
.StencilRoot body{margin:0;background:#fff;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;-o-hyphens:auto;hyphens:auto;font:13px/1.25 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.3rem}
.StencilRoot .Themable .ThemeReset,.StencilRoot body{color:#000}
.StencilRoot button,.StencilRoot input,.StencilRoot select,.StencilRoot textarea{font:13px/1.25 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.3rem}
.StencilRoot audio,.StencilRoot canvas,.StencilRoot video{display:inline-block;*display:inline;*zoom:1}
.StencilRoot [hidden],.StencilRoot audio:not([controls]){display:none;height:0}
.StencilRoot h1{font-size:32px;font-size:3.2rem}
.StencilRoot h2{font-size:30px;font-size:3rem}
.StencilRoot h3{font-size:27px;font-size:2.7rem}
.StencilRoot h4{font-size:24px;font-size:2.4rem}
.StencilRoot h5{font-size:22px;font-size:2.2rem}
.StencilRoot h6{font-size:20px;font-size:2rem}
.StencilRoot h1,.StencilRoot h2,.StencilRoot h3,.StencilRoot h4,.StencilRoot h5,.StencilRoot h6{font-weight:400;font-weight:200}
.StencilRoot .Icon,.StencilRoot h1,.StencilRoot h2,.StencilRoot h3,.StencilRoot h4,.StencilRoot h5,.StencilRoot h6{-webkit-text-rendering:optimizeLegibility;-moz-text-rendering:optimizeLegibility;-ms-text-rendering:optimizeLegibility;-o-text-rendering:optimizeLegibility;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.StencilRoot strong{font-weight:700}
.StencilRoot q{quotes:none}
.StencilRoot q:after,.StencilRoot q:before{content:'';content:none}
.StencilRoot img{border:0;vertical-align:bottom;-ms-interpolation-mode:bicubic}
.StencilRoot svg:not(:root){overflow:hidden}
.StencilRoot table{border-collapse:collapse;border-spacing:0!important}
.StencilRoot td,.StencilRoot th{vertical-align:top}
.StencilRoot sub,.StencilRoot sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
.StencilRoot sup{top:-.5em}
.StencilRoot sub{bottom:-.25em}
.StencilRoot small{font-size:80%;color:inherit}
.StencilRoot :link,.StencilRoot :visited{text-decoration:none}
.StencilRoot .Themable .ThemeReset :link,.StencilRoot .Themable .ThemeReset :visited,.StencilRoot :link,.StencilRoot :visited{color:#324fe1}
.StencilRoot a:hover{text-decoration:underline}
.StencilRoot a:focus{outline:dotted thin;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}
.StencilRoot input:focus,.StencilRoot textarea:focus{outline:0}
.StencilRoot .Themable .ThemeReset input:focus,.StencilRoot .Themable .ThemeReset textarea:focus,.StencilRoot input:focus,.StencilRoot textarea:focus{border-color:rgba(82,168,236,.8);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6)}
.StencilRoot a:active,.StencilRoot a:hover{outline:0}
.StencilRoot cite,.StencilRoot em{font-style:italic}
.StencilRoot button,.StencilRoot label{cursor:pointer}
.StencilRoot abbr[title]{cursor:help}
.StencilRoot textarea{resize:vertical}
.StencilRoot ul{list-style-type:none}
.StencilRoot b{font-weight:400}
.StencilRoot i{font-style:normal}
.StencilRoot abbr[title],.StencilRoot fieldset{border:0}
.StencilRoot ol{padding-left:40px;list-style-type:decimal}
.StencilRoot fieldset,.StencilRoot ul{padding:0}
.StencilRoot dd,.StencilRoot fieldset{margin:0}
.StencilRoot input,.StencilRoot select,.StencilRoot textarea{-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;-o-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}
.StencilRoot .Themable .ThemeReset input,.StencilRoot .Themable .ThemeReset select,.StencilRoot .Themable .ThemeReset textarea,.StencilRoot input,.StencilRoot select,.StencilRoot textarea{background-color:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:none\9}

for the original article, see 〔 Challenging CSS Best Practices By Thierry Koblentz. At https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/

Like what you read? Buy JavaScript in Depth