Je derde voorbeeld gaat over het chainen van eenvoudige selectors via de descendant combinator, die een beetje een vagere en langzamere versie is van de child combinator. Als je IE6 niet ondersteunt, kun je beter de child combinator gebruiken.

Voorbeeld, #twitter p vs #twitter>p. Eerst verzamelt de browser alle p elementen, dan gaat hij een niveau hoger en controleert of dit element het id “twitter” heeft. Als dat niet het geval is, zal de browser hier stoppen als je de child combinator hebt gebruikt. Met de descendant combinator zal hij helemaal naar de root node gaan (als hij onderweg geen #twitter tegenkomt). Dus, valse positieven zijn altijd iets langzamer met de descendant combinator.

Het grotere probleem met de descendant combinator is zijn vaagheid, die de kans op botsingen vergroot. Als neveneffect wordt het maken van willekeurig nestbare structuren een stuk lastiger.

.container #twitter p is ook overdreven specifiek. Wil je echt dat p elementen binnen #twitter er anders uitzien als #twitter niet binnen .container staat?

Een ander probleem is dat .container een locatie is en geen deel van de structuur. Dus, ja… die regel is niet herbruikbaar.

Kwalificeerbare CSS = herbruikbare code = klassen. Id-gebaseerde regels zijn, per definitie, niet herbruikbaar.

Reageren

Het e-mailadres wordt niet gepubliceerd.