.close {
background: #e00;
border: 2px solid #fff;
color: #fff;
font-size: 12px;
padding: 5px;
border-radius: 100px;
}Justasimportantly,avoidingglobalselectorsreducestheriskofstylingconflicts.
Adeveloperworkingononemoduleordocumentwon’tinadvertentlyaddarule
thatcreatesasideeffectinanothermoduleordocument.
Globalstylesandselectorsareperfectlyokayforresettingandnormalizingdefault
browserstyles.Inmostothercases,however,theyinvitebloat.
Avoid Overly Specific Selectors
Maintaininglowspecificityinyourselectorsisoneofthekeystocreatinglight-
weight,reusable,andmaintainableCSS.Asyoumayrecallfromtheprevious
chapter’ssectiononspecificity,atypeselectorhasthespecificity0,0,1.Classselect-
ors,ontheotherhand,haveaspecificityof0,1,0:
/* Specificity of 0,0,1 */
p {
color: #222;
font-size: 12px;
}/* Specificity of 0,1,0 */
.error {
color: #a00;
}Whenyouaddaclassnametoanelement,therulesforthatselectortakeprecedence
overmoregeneric-typeselectorrules.There’snoneedtofurtherqualifyaclassse-
lectorbycombiningitwithatypeselector.Doingsoincreasesthespecificityofthat
selectorandincreasestheoverallfilesize.
CSS Architecture and Organization 79