CSS Master

Putdifferently,usingp.errorisunnecessarilyspecificbecause.errorachieves

thesamegoal.Anotheradvantageisthat.errorcanbereusedwithotherelements.

Ap.errorselectorlimitsthe.errorclasstopelements.

Don’t Chain Classes

Alsoavoidchainingclassselectors.Selectorssuchas.message.warninghavea

specificityof0,2,0.Higherspecificitymeansthey’rehardtooverride,pluschaining

oftencausessideeffects.Here’sanexample:

.message {

background: #eee;

border: 2px solid #333;

border-radius: 1em;

padding: 1em;

}

.message.error {

background: #f30;

color: #fff;

}

.error {

background: #ff0;

border-color: #fc0;

}

Using<p class="message">withthisCSSgivesusanicegrayboxwithadark

grayborder,asseeninFigure2.1.

Figure 2.1. The visual effect of our .message selector

Using<p class="message error">,however,givesusthebackgroundof.mes-

sage.errorandtheborderof.errorshowninFigure2.2.

Figure 2.2. The visual result of using .message.error as a selector

Theonlywaytooverrideachainedclassselectorwouldbetouseanevenmore

specificselector.Toberidoftheyellowborder,we’dneedtoaddaclassnameor

80 CSS Master