CSS Master

elementwithaclassnameoffl).Still,updatingtheHTMLmaybeasmallpriceto

payfortrimmerCSS.

InKoblentz’soriginalpost,heusedclassnamessuchas.M-10formargin: 10px

and.P-10forpadding: 10px.Theproblemwithsuchanamingconventionshould

beobvious.Changingtoamarginoffiveor 20 pixelsmeanswe’dneedtoupdate

ourCSSandourHTML,orriskhavingclassnamesthatfailtoaccuratelydescribe

theireffect.

Usingclassnamessuchasp-1x,asdoneinthissection,resolvesthatissue.The1x

partoftheclassnameindicatesaratioratherthanadefinednumberofpixels.If

thebasepaddingisfivepixels(thatis,.p-1x { padding: 5px; }),then.p-2x

wouldsettenpixelsofpadding.Yes,that’slessdescriptiveofwhattheclassname

does,butitalsomeansthatwecanchangeourCSSwithoutupdatingourHTML,

orwithoutcreatingamisleadingclassname.

AnatomicCSSarchitecturedoesn’tpreventusfromusingclassnamesthatdescribe

thecontentinourmarkup.Youcanstilladd.button-closeor.accordion-trigger

toyourcode.SuchclassnamesarepreferableforJavaScriptandDOMmanipulation.

BEM versus Atomic CSS

BEMworksbestwhenyouhavealargenumberofdevelopersbuildingCSSand

HTMLmodulesinparallel.Ithelpstopreventthekindofmistakesandbugsthat

arecreatedbysizableteams.Itscaleswell,inpart,becausethenamingconvention

isdescriptiveandpredictable.BEMisn’tonlyforlargeteams;butitworksreally

wellforlargeteams.

AtomicCSSworksbetterwhenthereisasmallteamorasingleengineerresponsible

fordevelopingasetofCSSrules,withfullHTMLcomponentsbuiltbyalargerteam.

WithAtomicCSS,developerscanjustlookatastyleguide—ortheCSSsource—to

determinewhichsetofclassnamesthey’llneedforaparticularmodule.

Conclusion

Afterreadingthischapter,youshouldnowknow:

■ whyclassselectorsarethemostflexibleselectorforwritingscalable,maintainable

CSS

92 CSS Master