Het één of het ander

Naar aanleiding van een comment van Protestboarder wanneer het nu aangeraden is om een class of id te gebruiken:

Keuze tussen class of id voor dummy’s


Het verschil zit hem erin dat een id uniek is op één webdocument, terwijl een class, laten we zeggen anti-uniek, is.
Voor diegenen die niet weten waarover het hier gaat:

Een id of een class is een aanduiding, benaming die je geeft aan een webdocument-element, zoals daar zijn om maar enkele op te noemen:

  • <p>
  • <div>
  • <form>
  • <ul>
  • etc …

Dus geef je bijvoorbeeld aan een <ul> die de navigatie maakt een id: <ul id="navigatie">
Terwijl je dezelfde navigatie aan class aanduiding geeft met: <ul class="navigatie">

Opgelet:
Zelfs al gebruik je een id meerder malen in je document, zal je website functioneren, maar ze zal niet valid zijn.

Een id gebruiken

Je gebruikt een id als je een bepaald onderdeel van je layout wilt benamen waarvan je weet dat deze éénmaal in je document zal voorkomen, zoals je navigatie, je header, je inhoud, je footer, je Google-adsense, etc …
Een id wordt op deze manier aan je document toegevoegd:

  1. <ul id="navigatie">
  2. <div id="footer">
  3. <p id="extra_info">

En in je CSS bestand zal de aanduiding erzo uitzien:

  1. #navigatie { margin-left: 45px; }
  2. #footer { padding-right: 45px; }
  3. #extra_info { text-decoration: underline; }

Een class gebruiken

Je gebruikt een class voor elementen die je meerde malen zal hebben in je document zoals foutmeldingen, belangrijke punten, titels, navigatie-onderdelen, etc…
Een class voeg je op volgende manier toe aan je document:

  1. <a href="#" class="link">
  2. <div class="artikel">
  3. <p class="belangrijk">

En in je CSS zal een aanroep naar deze elementen er zo uitzien:

  1. .link { color: #996; }
  2. .artikel { margin-right: 4px; }
  3. .belangrijk { text-decoration: underline; font-weight: bold; }

Het fijne aan een class is dat je meerdere class kunt bepalen voor één element:

<a href="#" class="link belangrijk">

Waarbij wel een spatie tussen de naamgeving moet staan.

Semantiek bij naamkeuze

Wat is semantiek ?
Nu, stel het zo: Je hebt een tekst die een fout weer moet geven, dus deze zal over het algemeen rood zijn, en je geeft je class de naam rood. Nu, dat is goed en wel, voor dit moment, stel je hebt nu een hele andere opzet en wilt opeens dat alle foutmeldingen oranje zijn, dan is de gekozen naam niet meer zo doeltreffend hé ?
Dus is het beter zijn de benaming te kiezen naargelang het doel van de class of id.