.local {
background: #ffcccc;
}Aswellassavingusafewbytes,our.sports,and.localrulesetscannowbe
addedtootherelements.Usinganattributeselectorsuchas[id=sidebar]letsusgetaroundthehigher
specificityofanidentifier.Thoughitlacksthereusabilityofaclassselector,the
lowspecificitymeansthatwecanavoidchainingselectors.When the High Specificity of id Selectors is Useful
Insomecircumstances,youmightwantthehigherspecificityofanidselector.
Forexample,anetworkofmediasitesmightwishtousethesamenavigationbar
acrossallofitswebproperties.Thiscomponentmustbeconsistentacrosssites
inthenetwork,andshouldbehardtorestyle.Usinganidselectorreducesthe
chancesofthosestylesbeingaccidentallyoverridden.Finally,let’stalkaboutselectorssuchas#main article.sports table#stats
tr:nth-child(even) td:last-child.Notonlyisitabsurdlylong,butwithaspe-
cificityof2,3,4,it’salsonotreusable.Howmanypossibleinstancesofthisselector
cantherebeinyourmarkup?Let’smakethisbetter.Wecanimmediatelytrimour
selectorto#stats tr:nth-child(even) td:last-child.It’sspecificenoughtodo
thejob.Yetthefarbetterapproach—forbothreusabilityandtominimizethenumber
ofbytes—istouseaclassnameinstead.A Symptom of Preprocessor Nesting
Overlyspecificselectorsareoftentheresultoftoomuchpreprocessornesting.
We’lldiscussthismoreinChapter 9.Use Semantic Class Names
Whenweusethewordsemantic,wemeanmeaningful.Classnamesshoulddescribe
whattheruledoesorthetypeofcontentitaffects.Wealsowantnamesthatwill
endurechangesinthedesignrequirements.Namingisharderthanitlooks.82 CSS Master