Nu vă limitați la o singură clasă CSS pe element.
Foi de stil cascadă (CSS) vă permit să definiți aspectul unui element prin accesarea atributelor pe care le aplicați acelui element. Aceste atribute pot fi fie ID, fie o clasă și, la fel ca toate atributele, ele adaugă informații utile elementelor la care sunt atașate. În funcție de atributul pe care îl adăugați la un element, puteți scrie un selector CSS pentru a aplica stilurile vizuale necesare care sunt necesare pentru a obține aspectul și simțul elementului respectiv și site-ul în ansamblul său.
În timp ce fie ID-uri sau clase lucrează în scopul de a le încorpora cu reguli CSS, metodele moderne de proiectare web favorizează clasele asupra ID-urilor, parțial, deoarece acestea sunt mai puțin specifice și mai ușor de a lucra în general. Da, veți găsi în continuare multe site-uri care utilizează coduri de identitate, dar acele atribute sunt aplicate mai puțin decât în trecut, în timp ce clasele au preluat paginile web moderne.
Clase singulare sau multiple în CSS?
În cele mai multe cazuri, ați atribui un element de clasă unui element, dar de fapt nu vă limitați la o singură clasă în felul în care vă aflați cu ID-uri. În timp ce un element poate avea doar un singur atribut de identitate, puteți da absolut un element mai multor clase și, în unele cazuri, acest lucru va face pagina dvs. mai ușor de stil și mult mai flexibilă!
Dacă trebuie să alocați mai multe clase unui element, puteți adăuga clasele suplimentare și pur și simplu le puteți separa cu un spațiu din atributul dvs.
De exemplu, acest paragraf are trei clase:
pullquote featured left "> Acesta ar fi textul paragrafului
Aceasta stabilește următoarele trei clase pe eticheta paragrafului:
- Pullquote
- Recomandate
- Stânga
Observați spațiile dintre fiecare dintre aceste valori de clasă. Aceste spații sunt ceea ce le stabilește ca clase diferite, individuale. Acesta este și motivul pentru care numele de clasă nu pot avea spații în ele, deoarece acest lucru le-ar stabili ca clase separate.
De exemplu, dacă ați folosit "pullquote-featured-left" fără spațiu, ar fi o valoare de clasă, dar exemplul de mai sus, unde aceste trei cuvinte sunt separate cu un spațiu, le stabilește ca valori individuale. Este important să înțelegeți acest concept în timp ce decideți ce valori de clasă să utilizați pe paginile dvs. web.
După ce ai valorile din clasă în HTML, poți apoi să le atribui ca și clase în CSS și să aplici stilurile pe care vrei să le adaugi. De exemplu.
.pullquote {...}
.Recomandate { ... }
p.left {...}
În aceste exemple, perechile de declarații CSS și perechi de valori ar fi în interiorul coastelor curl, care este modul în care acele stiluri vor fi aplicate selectorului potrivit.
Notă - dacă setați o clasă la un anumit element (de exemplu, p.left), îl puteți utiliza în continuare ca parte a unei liste de clase; totuși, fiți conștienți de faptul că va afecta numai acele elemente care sunt specificate în CSS. Cu alte cuvinte, stilul p.left se va aplica doar paragrafelor cu această clasă, de vreme ce selectorul dvs. spune de fapt că îl aplică la "paragrafe cu o valoare a clasei" stânga "". În schimb, ceilalți doi selectori din exemplu nu specifică un anumit element, astfel încât aceștia s-ar aplica oricăror elemente care utilizează aceste valori de clasă.
Avantajele claselor multiple
Mai multe clase pot face mai ușor adăugarea de efecte speciale elementelor fără a fi nevoie să creați un stil complet nou pentru acel element.
De exemplu, poate doriți să aveți abilitatea de a pluti rapid în stânga sau în dreapta . S-ar putea scrie două clase la stânga și la dreapta cu doar float: left; și plutiți: drept; în ele. Apoi, ori de câte ori aveați un element trebuie să plutești la stânga, pur și simplu adăugați clasa "stânga" la lista de clasă.
Există totuși o linie foarte bună pentru a merge aici. Amintiți-vă că standardele web impun separarea stilului și a structurii. Structura este gestionată prin HTML, în timp ce stilul este în CSS.
Dacă documentul dvs. HTML este umplut cu elemente care au toate numele de clasă, cum ar fi "roșu" sau "stânga", care sunt nume care dictează modul în care ele ar trebui să arate mai degrabă decât ceea ce sunt acestea, traversați această linie între structură și stil. Încerc să limitez cât mai mult posibil numele meu de clasă non-semantică din acest motiv.
Clase multiple, Semantică și JavaScript
Un alt avantaj al folosirii mai multor clase este că vă oferă mai multe posibilități de interactivitate.
Puteți aplica noi clase elementelor existente utilizând JavaScript fără a elimina oricare dintre clasele inițiale. De asemenea, puteți utiliza clase pentru a defini semantica unui element . Aceasta înseamnă că puteți adăuga clase suplimentare pentru a defini ceea ce semnifică elementul semantic. Acesta este modul în care funcționează microformatele.
Dezavantaje ale claselor multiple
Cel mai mare dezavantaj față de utilizarea mai multor clase pe elementele dvs. este că le poate face puțin greu să se uite și să le gestioneze în timp. Ar putea deveni dificil să determinați ce stiluri afectează un element și dacă vreun scenariu îl influențează. Multe dintre cadrele disponibile astăzi, cum ar fi Bootstrap, utilizează în mod greu elemente cu mai multe clase. Acest cod poate fi scos din mână și greu de lucrat cu foarte repede dacă nu ești atent.
Când folosiți mai multe clase, aveți de asemenea riscul de a avea stilul pentru o clasă să suprascrie stilul altui, chiar dacă nu ați intenționat acest lucru. Acest lucru poate face dificilă înțelegerea motivului pentru care stilurile dvs. nu sunt aplicate chiar și atunci când se pare că ar trebui.
Trebuie să fii conștient de specificitate, chiar și cu atributele aplicate acelui singur element!
Folosind un instrument precum instrumentele Google pentru webmasteri, puteți vedea mai ușor modul în care clasele dvs. vă afectează stilurile și evitați această problemă a stilurilor și atributelor în conflict.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 8/7/17