CSS – Hoe gebruik je id en class op de juiste manier?

Het gebruik van id en class in html code roept nog wel eens vragen op. De een gebruikt het te pas en te onpas in zijn code en de ander geeft aan dat je id maar eenmalig mag gebruiken. Hoe zit dat nu eigenlijk?

ID is uniek

Wanneer je CSS wilt koppelen aan een html element dan moet je gebruik maken van class en id. Een id zegt het eigenlijk al, het gaat om een unieke naam, gekoppeld aan kernelementen van een website, bijvoorbeeld de header, de navigatie, de inhoud, de zijkant, de footer en de zoekfunctie. Deze onderdelen komen maar een keer op een webpagina voor en krijgen daarom een unieke naam. Dat is dus een id.

class voor meer onderdelen

Een class gebruik je om individuele onderdelen te koppelen aan CSS. Je wilt bijvoorbeeld een tekst rood maken en dan geef je deze tekst een class mee. Deze class kan vaker worden gebruikt in een webpagina. Je kunt namelijk besluiten om meerdere delen van de tekst rood te maken.

Duidelijk omschrijven

Het handigste is het om omschrijvingen te gebruiken van het betreffende onderdeel als naam van het id of de class. id=”footer” is wel duidelijk, maar class=”red” is niet duidelijk.

Het kan namelijk zomaar zijn dat jij of een ander later, wilt dat rode tekst zwart wordt, maar vetgedrukt. Het gaat dus niet om de kleur, maar om de bedoeling. Stel dat de rode tekst is bedoeld als belangrijke tekst, geef het dan bijvoorbeeld de class “important” mee.

Geen nummers, underscores en locaties

Geef de namen van classes en id’s geen nummer mee, dat maakt het maar nodeloos ingewikkeld en dat moet je juist vermijden om het leesbaar te houden. Dit geldt ook voor het gebruik van underscores ( _ ), deze moet je niet gebruiken. Tussenstreepjes vormen minder een probleem.

Tenslotte is het ook niet handig om namen te gebruiken die een locatie aanduiden. Ook hier zit je weer met het probleem dat een zijblok aan de linkerkant op een later moment wellicht beter tot zijn recht komt aan de rechterkant. Wanneer het dan nog steeds de naam ‘linkerkant’ draagt is de verwarring compleet.

Denk vooruit

Het is voor jezelf misschien goed te onthouden, maar stel je voor dat je de site wilt verkopen. Een nieuwe eigenaar zal er alleen maar voordeel van hebben als je duidelijke omschrijvingen aan je css code hebt toegevoegd.