Dezvoltatorii se luptă adesea cu denumirea claselor și ID-urilor CSS. Urmați aceste bune practici pentru o denumire eficientă.
Convențiile de denumire pentru clasele și ID-urile CSS au un rol semnificativ în înțelegerea și menținerea codului într-un proiect JavaScript. Numele folosite pot spori claritatea, reutilizarea și flexibilitatea bazei de cod. Respectarea celor mai bune practici este importantă atunci când denumești clasele CSS și ID-urile într-un proiect JavaScript.
1. Folosiți nume semantice
Alegerea numelor care explică cu precizie funcția sau scopul elementului este crucială. Numele semantice oferă un context semnificativ și fac codul mai ușor de înțeles.
De exemplu, în loc să folosiți nume tradiționale precum cutie sau titular, încercați să folosiți nume precum antet sau bara laterală care reflectă rolul specific al componentei.
/* Exemplu de nume semantice */
.antet {}
.bara laterală {}
2. Utilizați convenții de denumire consistente
Consecvența este esențială atunci când numiți clase și ID-uri CSS. Utilizarea aceluiași standard de denumire în general face mai simplă menținerea structurii bazei de cod.
Convențiile de denumire BEM (Block Element Modifier) și OOCSS (Object-Oriented CSS) sunt convențiile de denumire cele mai preferate.
Puteți utiliza convenția de denumire OOCSS pentru a scrie cod CSS care este modular, gestionabil și scalabil. Iată o ilustrare a modului în care poți creați un meniu de navigare folosind OOCSS:
/* Structura */.nav {
afişa: contracta;
stil de listă: nici unul;
}.nav__item {
margine-dreapta: 1rem;
}.nav__link {
text-decor: nici unul;
culoare: #333;
}/* Aspect */
.nav__link:planare {
text-decor: subliniază;
}
Aveți două părți distincte ale codului pentru meniul de navigare în acest exemplu, una pentru structură și una pentru aspect. Partea de aspect descrie culorile și alte stiluri care îi conferă un aspect atrăgător, în timp ce secțiunea de structură explică cum și unde vor fi poziționate elementele din meniu.
3. Evitați spațiile de nume
În CSS, spațiile de nume sunt structuri semantice care vă permit să furnizați un prefix de spațiu de nume pentru selecțiile lor. Pentru a face diferența între module, biblioteci sau alte părți ale bazei de cod care ar putea avea nume de clase conflictuale, se folosește prefixul spațiului de nume.
Această caracteristică este utilă, totuși, poate cauza probleme de specificitate și de întreținere.
Unul dintre cele mai mari dezavantaje ale spațiilor de nume este dificultatea de a gestiona specificitatea selectorului. Un prefix de spațiu de nume poate face o selecție mai particulară, făcând mai dificilă înlocuirea stilurilor în viitor.
Acest lucru duce la umflarea codului CSS, care este confuz și dificil de menținut în timp.
Luați, de exemplu:
/* Cu spațiu de nume */.modulul-meu.conţinut {
culoare de fundal: albastru;
}/* Fara spatiu de nume */
.modul-antet {
culoare de fundal: roșu;
}.modul-conținut {
culoare de fundal: galben;
}
Prefixul spațiului de nume .modulul-meu și .conţinut ambele sunt utilizate în blocul principal de cod. Ca rezultat, selecția devine mai precisă, ceea ce face ca anularea stilului viitor să fie mai provocatoare.
În a doua parte, spațiul de nume este înlocuit cu nume descriptive de clasă .modul-antet și .modul-conținut. Pe lângă faptul că codul este mai ușor de înțeles, acest lucru îl face și mai ușor de întreținut.
Utilizarea spațiilor de nume adaugă o complexitate inutilă programului dvs., mai ales atunci când mulți oameni lucrează la diferite părți ale aceluiași proiect. S-ar putea să vă fie dificil să înțelegeți și să modificați codul celuilalt, deoarece diferite echipe pot folosi prefixe diferite de spațiu de nume.
Utilizați nume de clasă care sunt descriptive, de exemplu:
.antet {culoare de fundal: roșu;
}
.conţinut {
culoare de fundal: galben;
}
Folosind nume descriptive ale claselor, puteți elimina cerințele pentru spații de nume și vă puteți menține baza de cod bine structurată și ușor de înțeles.
4. Evitați numele globale
În proiectele JavaScript, evitarea numelor globale pentru clasele și ID-urile CSS este esențială. Numele globale complică întreținerea codului și crește posibilitatea riscurilor de denumire. Pentru a asigura o bază de cod mai durabilă și mai scalabilă, este bine să utilizați nume mai precise în domeniul unei componente sau al unui modul.
Luați în considerare exemplul de mai jos:
Utilizarea incorectă a numelor globale<divclasă="container">
<divclasă="bara laterala">Conținut aici
div>
div>
Numele generice ale claselor bara laterală și recipient în exemplul de mai sus sunt susceptibile de confruntări cu alte foi de stil sau cod JavaScript din interiorul proiectului. De exemplu, dacă două foi de stil specifică același lucru .bara laterală clasă, unul cu fundal albastru și celălalt cu fundal roșu, culoarea barei laterale va depinde de ultima foaie de stil încărcată. Rezultate neașteptate și imprevizibile pot apărea din aceasta.
Este mai bine să folosiți nume mai precise care se încadrează în cadrul componentei sau al modulului relevant pentru a minimiza aceste probleme.
Uită-te la o versiune îmbunătățită.
Îmbunătățit cu nume specifice<divclasă="header__container">
<divclasă="bara laterală__conținut">Conținut aici
div>
div>
În versiunea modificată, numele claselor header__container și sidebar__conținut clarificați pentru ce este fiecare element și pentru ce face acesta.
Utilizarea unor nume specifice reduce riscul conflictelor de denumire și asigură că stilurile afectează doar componentele anticipate din interiorul componentelor sau modulelor respective.
5. Utilizați convenția de denumire BEM
Convenția de denumire BEM (Block Element Modifier) este populară pentru denumirea claselor CSS și a ID-urilor în proiecte JavaScript. BEM oferă o modalitate structurată și modulară de denumire a elementelor, încurajează reutilizarea și facilitează întreținerea bazelor de cod.
Convențiile BEM constau din blocuri, elemente și modificatori. Un element de nivel înalt sau o componentă de sine stătătoare se numește bloc. Elementele sunt porțiunile componente ale unui bloc care se bazează pe contextul blocului. Modificatorii pot schimba aspectul sau comportamentul unui bloc sau element.
Iată un exemplu folosind convenția de denumire BEM:
/* Exemplu de convenție de denumire BEM *//* Bloc */
.antet {}/* Elementul blocului */
.logo antet {}
.header__meniu {}
/* Modificatorul elementului */
.header__meniu--activ {}
Ilustrația de mai sus afișează a antet bloc cu a siglă si a meniul element. The meniul elementul primește activ schimbare pentru a arăta că a devenit activ.
Puteți identifica rapid componentele fundamentale și conexiunile dintre diferitele porțiuni, făcând structura și ierarhia bazei de cod mai clare.
6. Utilizați prefixe sau sufixe
Puteți adăuga setări suplimentare pentru clasele CSS și numele ID-ului prin prefixarea sau postfixarea acestora, în special în proiectele mai mari. Puteți folosi un prefix ca js- pentru a indica faptul că o clasă sau un ID oferă capabilități JavaScript. Convenții de denumire JavaScript împreună cu aceste convenții de denumire CSS vă pot economisi timp și efort pe termen lung.
HTML cu prefix JavaScript<butonclasă=„js-toggle”>Comutarebuton>
<divid="js-modal">Modaldiv>
7. Utilizați nume descriptive
Puteți înțelege mai bine scopul, funcția sau conținutul unui element prin nume descriptive.
Luați în considerare exemplul de mai jos:
/* Nume non-descriptive */.cutie albastră {
/* Stiluri aici */
}
A {
/* Stiluri aici */
}
Numele claselor cutie albastră și A în exemplul de mai sus nu transmit informații relevante despre componentele la care se referă. Absența unei denumiri descriptive vă poate face dificilă înțelegerea rapidă a scopurilor sau rolurilor anumitor componente din program.
Folosiți nume descriptive care explică cu exactitate rolul elementului îmbunătăți lizibilitatea și mentenabilitatea codului.
Luați în considerare exemplul îmbunătățit de mai jos:
/* Nume descriptive */.card-produs {
/* Stiluri aici */
}
.legatura-navigatie {
/* Stiluri aici */
}
Numele claselor card-produs și link-ul de navigare în versiunea actualizată faceți evident ce scop servește fiecare element. Veți găsi explorarea și editarea codului mai simplă cu aceste nume descriptive.
Utilizarea numelor descriptive aduce beneficii dezvoltatorilor actuali și potențiali viitori care lucrează la baza de cod. Când revedeți codul după ceva timp, puteți înțelege cu ușurință structura și funcționarea pieselor.
8. Folosiți nume scurte și concise
Deși numele distinctive sunt esențiale, păstrarea lor concisă este, de asemenea, importantă. Numele lungi de clasă și ID pot face codul mai dificil de citit și de întreținut. Încercați să găsiți un echilibru între a fi scurt și a fi detaliat. În plus, luați în considerare utilizarea acronimelor sau abrevierilor binecunoscute în contextul proiectului.
Luați în considerare cazul în care doriți să utilizați CSS pentru a personaliza un meniu de navigare pe site-ul dvs. Puteți folosi nume mai scurte și mai specifice, cum ar fi nav-element sau nav-link în loc de lungi ca interfață de navigare sau principal-legătură-de-navigație.
.nav-element {
/* Stiluri pentru elementele meniului de navigare */
}
.nav-link {
/* Stiluri pentru linkurile de navigare */
}
Folosind acronime sau abrevieri populare în contextul proiectului, cum ar fi nav pentru navigare, ar putea face codul mult mai ușor de înțeles de către alți programatori.
Cele mai bune practici pentru denumirea claselor și ID-urilor CSS
Într-un proiect JavaScript, este esențial să denumești în mod corespunzător clasele și ID-urile CSS pentru citirea, întreținerea și scalabilitatea codului.
Puteți simplifica foile de stil și puteți îmbunătăți calitatea codului. Făcând timp pentru a stabili convenții bune de denumire, va da roade pe termen lung, facilitând înțelegerea și menținerea bazei de cod pentru dvs. și pentru ceilalți.
