ID nebo CLASS?

Jaký je váš pohled na použití atributů id nebo class pro kaskádové styly? A co pro selektory jQuery? A co teď, když máme HTML 5. Můj názor je jasný, ale budu rád, když se podělíte s vlastními zkušenostmi.

ID vs CLASS z pohledu kaskádových stylů

Já říkám class, jedině class. Nevím, kde se to vzalo, ale na mnoha příkladech v různých materiálech o HTML a CSS autoři používají id pro napojení kaskádových stylů. Důvod proč se kloním ke class je, že id musí být dle definice HTML unikátní v celém framu. Prohlížeče jsou ale velmi benevolentní a dovolí vám stylovat i více prvků se stejným id. A proč dělám tedy humbuk kolem problému, který očividně neexistuje?

ID vs CLASS z pohledu javascriptu

Problém totiž přijde až s použitím javascriptu. Ve svých projektech používám jQuery, kde jsem se právě s tímto problémem setkal. Začnete-li používat id pro identifikaci html elementů, tak si na to pěkně zvyknete a při napojování jQuery je budete využívat také. Například takto:

$(document).ready(function(){
   $('#logo').click(function(){
      // animace loga, skryti, ...
   });
}); 

No a jednoho dne budete dělat formulář a tak mu dáte id, přes jQuery napojíte Tinymce a vše funguje tak jak má. No a pak tento formulář chcete zobrazit na stránce vícekrát, třeba pro reakci na každý zobrazený článek. A teď právě narazíte. Už si nejsem přesně jistý, zda to byl problém jQuery nebo Tinymce, ale jakmile jsem měl v HTML více elementů se stejným id, tak se to celé po... pokazilo. Buď jQuery nebo Tinymce chápají unikátnost id striktněji než HTML prohlížeče a požadovanou operaci vám provede pouze na prvním zachyceném elementu.

Připouštím, že je to tak trochu extrémní případ. Ale to je zatím jeden, a někomu z vás se to možná stalo v jiných případech. Proto je podle mne class lepší. Je zkrátka nekonfliktní a umožňuje i zápis metadat pro javascript. Id samozřejmě stále musíme používat pro tagy label, tam námitek nemám.

Hurá je tu HTML 5

No konečně, konečně se sešla rada starších internetu se soudruhy z NDR a udělali atribut data-cokoliv. Od té doby je pro mne vše vyřešeno. Id používám jen pro tag label. Class používám jen pro kaskádové styly a ne pro jQuery, tak jak tomu rada starších internetu na počátku chtěla. A pro napojení javascriptu používám atribut data-jquery. Ihned pak poznám, zda má element nějaký význam pro javascript. 

Kdybych například chtěl AJAXem odesílat formulář, tak bych HTML napsal nějak takto ...

<form action="index.php" method="post" data-jquery="KontaktniFormular">
   <label for="jmeno">Jméno:</label>
   <input id="jmeno" name="jmeno" type="text" />
   <label for="zprava">Zpráva:</label>
   <textarea id="zprava" name="zprava"></textarea>
   <input type="submit" name="Odeslat">
</form> 

... a obslužný JS by vypadal takto ...

$(document).ready(function(){
   $('[data-jquery=KontaktniFormular]').submit(function(event){
      event.preventDefault();
      $.post('index.php',$(this).serialize());
   });
}); 

Jak řešíte id/class/jquery vy?