Clasa este printre cele mai bune optiuni pentru a fi folosita drept selector. Dar daca le folosim prea des putem cadea in extrema de a avea o groaza de clase care nu au nici un rost de a fi in pagina.

Cand pagina este incarcata de clase nefolositoare (sau care ar putea fi grupate) nu numai ca este mai greu pentru noi sa citim codul HTML dar si pentru un browser.

De exemplu avem urmatorul meniu pentru o pagina: 

<div class="navbar navbar-top">
    <div class="link-container">
        <div class="link-group-left">
            <div class="menu-button-link">
                <a class="link" href="/acasa">Acasa</a>
            </div>
            <div class="menu-button-link">
                <a class="link" href="/despre">Despre</a>
            </div>
            <div class="menu-button-link">
                <a class="link" href="/contact">Contact</a>
            </div>
        </div>
    </div>
</div>

Acesta nu numai ca este format din prea multe elemente, dar acesta contine si cateva clase care sunt in plus.

Atunci cand vrem sa folosim clase in HTML trebuie sa retinem urmatoarele puncte:

  • clasele trebuie sa fie semantice: ele spun ce rol are un obiect in pagina (nu referitor la stilizare). De exemplu clasa link-group-left nu ofera detalii despre continut (in afara de cel legat de stilizare) asa ca nu avem neapart nevoie de ea.
  • folosirea selectorilor descendenti: nu trebuie neaparat sa folosim o clasa pe fiecare element din meniu. Putem in primul rand sa folosim elemente mai semantice precum <nav>, <ul> sau <li> si apoi folosirea unor selectori descendenti precum: nav li.
  • codul CSS nu ar trebui sa dicteze cum sa fie structurata pagina HTML: structura paginii ar trebui sa spuna cum sa scriem selectorii CSS

Folosind aceste idei putem rescrie codul de mai sus: 

<nav class="navbar navbar-top">
    <ul class="navbar-link-list">
        <li>
            <a class="navbar-link" href="/acasa">Acasa</a>
        </li>
        <li>
            <a class="navbar-link" href="/despre">Despre</a>
        </li>
        <li>
            <a class="navbar-link" href="/contact">Contact</a>
        </li>
    </ul>
</nav>

Acesta varianta nu este perfecta dar mult imbunatatita fata de cea initiala.

Cum sa folosim clasele

In primul rand, clasele ar trebui folosite cand vrem sa grupam mai multe elemente impreuna. Ca acele elemente vor avea si aceeasi stilizarea este doar o coincidenta.

Un avantaj de a folosi o clasa fata de un selector mai general precum nav li este ca stim exact ce reguli se vor aplica unui element.

De exemplu, daca nu am folosi clase si am avea un alt element <nav> ce contine <li> in partea de jos a paginii si pe acesta nu am vrea sa aplicam aceeasi stilizare, va trebui sa adaugam pana la urma o clasa care sa reseteze regulile date de nav li.

Daca aplicam o clasa speciala pentru navigarea din partea de sus (precum mai devreme) si o alta clasa in partea de jos, ne putem structura mai bine codul CSS si in acelasi timp oferim si detalii asupra continutului fiecarui meniu.

Ambele metode de a selecta linkurile din meniu sunt bune doar ca folosirea unei clase ofera mai multe detalii cu ce se va intampla.

Un alt avantaj a folosirii claselor cu moderatie, este ca ne va fi mai usor sa lucram intr-o echipa. Rareori vom lucra singuri pe un proiect, asa ca folosirea unor clase care sunt usor de inteles si au sens este foarte importanta.

Concluzia este ca nu exista un raspuns corect. Tot ce conteaza este la alegem un stil de a scrie selectori si sa il respectam.

Daca vom alege sa folosim clase drept selectorul principal, important e sa nu exageram cu ele.

< Înapoi Următoarea lecție >