typeselectortothechain:.message.warning.exceptionordiv.message.warning.
It’smoreexpedienttocreateanewclassinstead.Ifyoudofindyourselfchaining
selectors,gobacktothedrawingboard.Eitherthedesignhasinconsistencies,or
you’rechainingprematurelyinanattempttopreventproblemsthatyoudon’thave.
Fixthoseproblems.Themaintenanceheadachesyou’llpreventandthereusability
you’llgainareworthit.
Avoid Using id Selectors
Becauseyoucanonlyhaveoneelementperidperdocument,rulesetsthatuseid
selectorsarehardtorepurpose.Doingsotypicallyinvolvesusingalistofidselect-
ors;forexample,#sidebar-featuresand#sidebar-sports.
Identifiersalsohaveahighdegreeofspecificity,sowe’llneedlongerselectorsto
overridedeclarations.IntheCSSthatfollows,weneedtouse#sidebar.sports
and#sidebar.localtooverridethebackgroundcolorof#sidebar:
#sidebar {
float: right;
width: 25%;
background: #eee;
}
#sidebar.sports {
background: #d5e3ff;
}
#sidebar.local {
background: #ffcccc;
}Switchingtoaclassselector,suchas.sidebar,letsussimplifyourselectorchain:
.sidebar {
float: right;
width: 25%;
background: #eee;
}
.sports {
background: #d5e3ff;
}CSS Architecture and Organization 81