Ditt tredje exempel handlar om att kedja enkla selektorer med hjälp av descendant combinatorn, som är en mer luddig och långsammare version av child combinatorn. Om du inte har stöd för IE6 bör du hellre använda barnkombinatorn istället.

Till exempel #twitter p vs #twitter>p. Först samlar webbläsaren alla p-element, sedan går den en nivå upp och kontrollerar om det här elementet har id:et ”twitter”. Om det inte har det stannar webbläsaren här om du har använt child combinatorn. Med descendant-kombinatorn reser den hela vägen till rotnoden (om den inte hittar några #twitter på vägen). Så falska positiva resultat är alltid något långsammare med descendant-kombinatorn.

Det större problemet med descendant-kombinatorn är att den är luddig, vilket ökar risken för kollisioner. Som en bieffekt blir det mycket svårare att skapa godtyckligt nästlingsbara strukturer.

.container #twitter p är också alltför specifik. Vill du verkligen att p element inom #twitter ska se annorlunda ut om #twitter inte ligger inom .container?

Ett annat problem är att .container är en plats och inte en del av strukturen. Så, ja… den regeln kan inte återanvändas.

Skalerbar CSS = återanvändbar kod = klasser. Id-baserade regler är per definition inte återanvändbara.

Lämna en kommentar

Din e-postadress kommer inte publiceras.