CSS Master

color: #333;

background: #ccc;

}

InbothourmarkupandCSS,search--inverseandsearch__label--inverseare

additionalclassnames.They’renotreplacementsforsearchandsearch__label.

ClassnamesaretheonlytypeofselectorusedinaBEMsystem.Childanddescend-

antselectorsmaybeused,butdescendantsshouldalsobeclassnames.Element

andIDselectorsareverboten.Thisensuresthatselectorspecificityremainslow,

selectorsarewithoutsideeffects,andCSSisindependentofmarkuppatterns.En-

forcingblockandelementnameuniquenessalsopreventsnamingcollisions,which

canbecomeaproblemamongteams.

Thereareseveraladvantagestothisapproach:

■ it’seasyfornewteammemberstoreadthemarkupandCSS,andunderstand

itsbehavior

■ addingmoredevelopersincreasesteamproductivity

■ consistentnamingreducesthepossibilityofclassnamecollisionsandsideeffects

■ CSSisindependentofmarkup

■ CSSishighlyreusable

There’salotmoretoBEMthanwhatcancomfortablyfitinasectionofachapter.

TheBEMsitedescribesthismethodologyinmuchgreaterdetail,andalsofeatures

toolsandtutorialstogetyoustarted.Tolearnmoreaboutthenamingconvention

aspectofBEM,anotherfantasticresourceisGetBEM.^15

Atomic CSS

IfBEMistheindustrydarling,AtomicCSSisitsrebelliousmaverick.Namedand

explainedbyThierryKoblentzofYahooinhis 2013 piece,“ChallengingCSSBest

Practices,”^16 AtomicCSSusesatightlibraryofclassnames.Theseclassnamesare

oftenabbreviatedanddivorcedfromthecontenttheyaffect.InanAtomicCSS

(^15) http://getbem.com/introduction/
(^16) http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
88 CSS Master