Dit tredje eksempel handler om at kæde simple selektorer via descendant-kombinatoren, som er en mere uklar og langsommere version af child-kombinatoren. Hvis du ikke understøtter IE6, bør du hellere bruge child-kombinatoren i stedet.

For eksempel #twitter p vs #twitter>p. Først samler browseren alle p-elementer, derefter går den et niveau op og kontrollerer, om dette element har fået id’et “twitter”. Hvis det ikke har det, stopper browseren her, hvis du har brugt child combinator. Med descendant-kombinatoren vil den rejse hele vejen til rodknuden (hvis den ikke finder nogle #twitter på sin vej). Så falske positive resultater er altid lidt langsommere med descendant-kombinatoren.

Det større problem med descendant-kombinatoren er dens uklarhed, som øger muligheden for kollisioner. Som en sideeffekt bliver det meget vanskeligere at skabe vilkårligt nestbare strukturer.

.container #twitter p er også alt for specifik. Ønsker du virkelig, at p elementer inden for #twitter ser anderledes ud, hvis #twitter ikke er inden for .container?

Et andet problem er, at .container er en placering og ikke en del af strukturen. Så, ja… den regel kan ikke genbruges.

Skalerbar CSS = genbrugelig kode = klasser. Id-baserede regler er pr. definition ikke genanvendelige.

Leave a comment

Din e-mailadresse vil ikke blive publiceret.