<p class="bw-2 bss p-1x sans br-1x bg-c bc-c">
Warning: The price for that item has changed.
</p>Twoclassnameschanged:bg-dandbc-dwerereplacedwithbg-candbc-c.We’ve
reusedfiverulesets.Now,let’screateabutton:
<button type="button" class="p-1x sans bg-a br-1x">Save</button>Heynow!Herewe’vereusedfourrulesetsandavoidedaddinganymorerulesto
ourstylesheet.InarobustatomicCSSarchitecture,addinganewHTMLcomponent
suchasanarticlesidebarwon’trequireaddingmoreCSS(though,inreality,itmight
requireaddingabitmore).AtomicCSSisabitlikeusingutilityclassesinyour
CSS,buttakentotheextreme.Specifically,it:
■ keepsCSStrimbycreatinghighlygranular,highlyreusablestyles,insteadofa
rulesetforeverycomponent
■ greatlyreducesspecificityconflictsbyusingasystemoflow-specificityselectors
■ allowsforrapidHTMLcomponentdevelopmentoncetheinitialrulesetsare
defined
However,AtomicCSSisnotwithoutcontroversy.
The Case Against Atomic CSS
AtomicCSSrunscountertojustabouteverythingwe’vebeentaughtonwriting
CSS.Itfeelsalmostaswrongasstickingstyleattributeseverywhere.Indeed,this
isoneofthemajorcriticismsoftheAtomicCSSmethodology:itblurstheline
betweencontentandpresentation.Ifclass="fl m-1x"floatsanelementtotheleft
andaddsaten-pixelmargin,whatdowedowhenwenolongerwantthatelement
tofloatleft?
Oneanswer,ofcourse,istoremovetheflclassfromourelement.Butnowwe’re
changingHTML.ThewholereasonbehindusingCSSissothatmarkupisunaffected
bypresentationandviceversa.(Wecanalsosolvethisproblembyremovingthe
.fl {float: left;}rulefromourstylesheet,althoughthatwouldaffectevery
CSS Architecture and Organization 91