Gebruik van ID's in CSS

Er zijn genoeg ideeën om structuur te krijgen in de CSS die je schrijft voor het stylen van jouw pagina’s. In dit artikel schrijf ik over het gebruik van ID’s in CSS en wat mijn advies is waarom je het niet wilt gebruiken.

Herbruikbaarheid

ID selectoren zijn goede selectoren wat heel goed werkt voor 1 specifiek item in je website, echter maakt dit het lastig. Hiermee maak je het voor jezelf een stuk moeilijker om modulair gebaseerd styling toe te passen aan je website. Wij bij Sigma Solutions geloven in het principe herbruikbaarheid op basis van atomen, waarmee je dus snel modules kunt opbouwen en daarmee consistente styling over je hele website behoudt.

Specificiteit

Een ID is veel specifieker dan een class of een HTML tag. Neem nou bijvoorbeeld onderstaand voorbeeld;

<p id="intro" class="excerpt">Lorem ipsum</p>

#intro{ color:blue; }

.content{ color:green }

p{ color:red; }

Ondanks dat de kleur rood als laatste wordt aangeroepen zal de tekst blauw zijn, omdat een ID specifieker is dan een class en een HTML tag.

In dieper geneste items kun je dus moeilijk een kleur gaan stylen op een bepaalde class die je wellicht ook buiten de specifieke ID gebruikt. Wat je dan vaak ziet is dat er !important of * gebruikt gaat worden om toch specifiek styling toe te passen. Uiteindelijk neemt dit zoveel kopzorgen met zich mee dan krijg je een sneeuwbal effect aan overschrijvingen binnen CSS.

Verwijderen van ID’s

Het is niet de bedoeling om al je ID’s gelijk te gaan verwijderen in de HTML, want ID’s kunnen juist wel heel goed werken voor andere doeleinden, zoals in Javascript of inline links zoals ‘Jump to content’.