}
}
}Thisisn’ttooegregious,right?Our[lang]selectorisonlyfourlevelsdeep,butlet's
lookatourcompiledCSSoutput:article {
color: #222;
margin: 1em auto;
width: 80%;
}
article.news h1 {
color: #369;
font-size: 2em;
}
article.news h1 [lang] {
font-style: italic;
}Nowwehaveacoupleofhigh-specificityselectors:article.news h1andart-
icle.news h1[lang].AsdiscussedinChapter 2 ,high-specificityselectorsincrease
thesizeofyourCSSfiles.Theyusemorecharactersthannecessary,andrequire
evenhigherhigh-specificityselectorstooverridethem.NeitherLessnorSasshasahardlimitonhowdeeplyrulesetscanbenested.Buta
smalleramountofnestingresultsinlowerspecificityandCSSthat’seasierto
maintain.Ifyou’venestedmorethanthreelevels,there’sagoodchanceyouneed
torefactoryourcode.@import and Partials
TheCSS@importruleallowsdeveloperstoaddrulesfromonestylesheettoanother
stylesheetdocument.Unfortunately,@importoftenhasanegativeimpactonwebsite
loadtimes.AsSteveSoudersexplainsinhisblog,^9 using@importfromwithina
linkedstylesheetwillcausethebrowsertodownloadeachfilesequentially,increas-(^9) http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
336 CSS Master