ID, nebo CLASS?

Pro přiřazení CSS pravidel k úplně libovolnému elementu na stránce je možné použít identifikátor nebo třídu. Na první pohled se to může zdát jedno, ale mezi ID a třídou jsou rozdíly:

  1. ID umí prohlížeč použít pro odkázání na #kotvu.

  2. Podle ID umí všechny prohlížeče najít element v JavaScriptu:

    var element = document.getElementById("id-elementu");

    Hledání podle třídy (getElementsByClassName) funguje přímo až od Exploreru 9.

  3. Identifikátor má v CSS vyšší prioritu. Následující kód proto zbarví odstavec na červenou, nikoliv na modrou (ukázka).

    p#cerveny {color: red}
    p.modry {color: blue}
  4. Stejné ID by teoreticky mělo být na stránce jen jednou…

Více stejných ID

Identifikátory by se narozdíl od tříd neměly na stránce opakovat.

Tak nějak praví specifikace.

V praktickém používání na tom moc nezáleží:

  1. V samotném CSS je to úplně jedno, přiřazení stejných ID k více elementům všude funguje.

  2. U kotev a hledání elementu dle ID v JavaScriptu zase první vyhrává, tj. prohlížeč odroluje na první #kotvu a JS vrátí první element s daným #identifikátorem (ukázka).

Mohlo by se zdát, že radím používat opakované používání stejných ID. Není tomu tak. Užitím jednoho identifikátoru vícekrát riskujeme obtížně odhalitelnou chybu.

Kdy používat ID a kdy třídu?

Dospěl jsem k závěru, že nejlepší je v CSS používat jen třídy a identifikátorům se v CSS selektorech vyhnou. ID ve stylech kromě přebíjení nic navíc nenabízejí (a přebíjet lze i s třídami).

Výhoda tohoto postupu je, že kdykoliv vidím na stránce v HTML kódu id, je jasné, že je tam kvůli JavaScriptu nebo #kotvě. Snižuje se tak při úpravách kódu nejistota, zda třeba přejmenování identifikátoru kvůli CSS nerozbije JavaScript.

Pokud chci daný element stylovat i s ním pracovat skriptem, napíšu jej jako:

<div id="element" class="element">

Myslím, že to za to stojí.

Alternativa k třídám a ID

Takový beztřídní zápis pravidla by mohl vypadat:

clovek[dulezity=ano] {color: red}

A HTML:

<clovek dulezity="ano">Jahoda</clovek>

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Doctype

HTML značka <!doctype>

Jaký (a jestli vůbec) psát <!doctype> do stránky?

Stylování atributu title

Vlastní styl bubliny title

Jaké jsou možnosti pro vlastní vzhled nápovědy, která se objevuje při vyplnění atributu title.

Značka <body> jako obal stránky

Obal <body>, nebo <div id=container>?

Ve standardním režimu lze značku <body> stylovat jako normální <div>. Má to cenu?

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

Komentáře