8 bedste fremgangsmåder til at navngive CSS-klasser og -id'er i et JavaScript-projekt

Navnekonventionerne for CSS-klasser og -id'er spiller en væsentlig rolle i forståelsen og vedligeholdelsen af ​​kode i et JavaScript-projekt. De anvendte navne kan forbedre kodebasens klarhed, genbrugelighed og fleksibilitet. Det er vigtigt at følge bedste praksis, når du navngiver CSS-klasser og id'er i et JavaScript-projekt.

1. Brug semantiske navne

Det er afgørende at vælge navne, der præcist forklarer elementets funktion eller formål. Semantiske navne giver meningsfuld kontekst og gør koden lettere at forstå.

For eksempel i stedet for at bruge traditionelle navne som boks eller holder, prøv at bruge navne som f.eks header eller sidebjælke som afspejler komponentens specifikke rolle.

/* Semantiske navne eksempel */
.header {}
.sidebjælke {}

2. Brug konsekvente navnekonventioner

Konsistens er nøglen, når man navngiver CSS-klasser og ID'er. Brug af den samme navnestandard over hele linjen gør det nemmere at vedligeholde kodebasens struktur.

BEM (Block Element Modifier) ​​og OOCSS (Object-Oriented CSS) navngivningskonventioner er de mest foretrukne navnekonventioner.

Du kan bruge OOCSS-navnekonventionen til at skrive CSS-kode, der er modulær, håndterbar og skalerbar. Her er en illustration af, hvordan du evt oprette en navigationsmenu bruger OOCSS:

/* Struktur */
.nav {
Skærm: bøje;
liste-stil: ingen;
}
.nav__item {
margin-højre: 1rem;
}
.nav__link {
tekst-dekoration: ingen;
farve: #333;
}
/* Udseende */
.nav__link:hover {
tekst-dekoration: understrege;
}

Du har to adskilte dele af koden til navigationsmenuen i dette eksempel, en til strukturen og en til udseendet. Udseendedelen beskriver farverne og andre stilarter, der giver det et tiltalende udseende, mens strukturafsnittet forklarer, hvordan og hvor menupunkterne vil blive placeret.

3. Undgå navnerum

I CSS er navnerum semantiske strukturer, der giver dig mulighed for at angive et navnerumspræfiks til deres valg. For at skelne mellem moduler, biblioteker eller andre dele af kodebasen, der kunne have modstridende klassenavne, bruges navneområdets præfiks.

Denne funktion er nyttig, men den kan forårsage problemer med specificitet og vedligeholdelse.

En af de største ulemper ved navnerum er vanskeligheden ved at håndtere vælgerspecificitet. Et navneområdepræfiks kan gøre et valg mere specifikt, hvilket gør det sværere at tilsidesætte stilarter i fremtiden.

Dette fører til CSS-kodebloat, som er forvirrende og udfordrende at vedligeholde over tid.

Tag for eksempel:

/* Med navneområde */
.mit-modul.indhold {
baggrundsfarve: blå;
}
/* Uden navneområde */
.modul-header {
baggrundsfarve: rød;
}
.modul-indhold {
baggrundsfarve: gul;
}

Navneområdets præfiks .mit-modul og .indhold bruges begge i hovedblokken af ​​kode. Udvælgelsen bliver mere præcis som et resultat, hvilket gør den fremtidige stiltilsidesættelse mere udfordrende.

I den anden del er navnerummet erstattet af beskrivende klassenavne .modul-header og .modul-indhold. Ud over at gøre koden lettere at forstå, gør dette den også nemmere at vedligeholde.

Brug af navnerum tilføjer unødvendig kompleksitet til dit program, især når mange mennesker arbejder på forskellige dele af det samme projekt. I kan finde det svært at forstå og ændre hinandens kode, da forskellige teams kan bruge forskellige navneområdepræfikser.

Brug klassenavne, der er beskrivende for eksempel:

.header {
baggrundsfarve: rød;
}
.indhold {
baggrundsfarve: gul;
}

Ved at bruge beskrivende klassenavne kan du måske gøre op med kravet om navnerum, og du kan holde din kodebase velstruktureret og let at forstå.

4. Undgå globale navne

I JavaScript-projekter er det afgørende at undgå globale navne til CSS-klasser og id'er. Globale navne komplicerer kodevedligeholdelse og øger muligheden for navngivningsrisici. For at sikre en mere holdbar og skalerbar kodebase er det godt, at du bruger mere præcise navne inden for rammerne af en komponent eller et modul.

Overvej eksemplet nedenfor:

 Forkert brug af globale navne 
<divklasse="beholder">
<divklasse="sidebjælke">
 Indhold her 
div>
div>

De generiske klassenavne sidebjælke og beholder i ovenstående eksempel er modtagelige for sammenstød med andre typografiark eller JavaScript-kode inde i projektet. For eksempel, hvis to typografiark angiver det samme .sidebjælke klasse, den ene med en blå baggrund og den anden med en rød baggrund, vil sidebjælkens farve afhænge af, hvilket typografiark der sidst indlæses. Uventede og uforudsigelige resultater kan opstå heraf.

Det er bedre at bruge mere præcise navne, der dækker inden for den relevante komponent eller modul for at minimere disse problemer.

Se på en forbedret version.

 Forbedret med specifikke navne 
<divklasse="header__container">
<divklasse="sidebar__indhold">
 Indhold her 
div>
div>

I den ændrede version er klassens navne header__container og sidebar__indhold gør det klart, hvad hvert element er til, og hvad det gør.

Brug af specifikke navne reducerer risikoen for navnekonflikter og sikrer, at stilene kun påvirker de forventede komponenter inde i deres respektive komponenter eller moduler.

5. Brug BEM navngivningskonvention

BEM-navnekonventionen (Block Element Modifier) ​​er populær til at navngive CSS-klasser og ID'er i JavaScript-projekter. BEM giver en struktureret og modulær måde at navngive elementer på, tilskynder til genbrug og gør vedligeholdelsen af ​​kodebaser lettere.

BEM-konventioner består af blokke, elementer og modifikatorer. Et højt niveau element eller en enkeltstående komponent kaldes en blok. Elementer er de komponentdele af en blok, der er afhængige af konteksten af ​​blokken. Modifikatorer kan ændre udseendet eller adfærden af ​​en blok eller et element.

Her er et eksempel, der bruger BEM-navnekonventionen:

/* BEM navnekonvention eksempel */
/* Bloker */
.header {} 
/* Element af blokken */
.header__logo {} 
.header__menu {}
/* Ændring af elementet */
.header__menu--aktiv {} 

Ovenstående illustration viser en header blok med en logo og en menu element. Det menu varen modtager aktiv ændre for at vise, at den er blevet aktiv.

Du kan hurtigt identificere de grundlæggende komponenter og forbindelserne mellem de forskellige dele, hvilket gør strukturen og hierarkiet af kodebasen klarere.

6. Brug præfikser eller suffikser

Du kan tilføje yderligere indstillinger til CSS-klasse- og ID-navne ved at præfikse eller efterfikse dem, især i større projekter. Du kan bruge et præfiks som f.eks js- for at angive, at en klasse eller et id tilbyder JavaScript-funktioner. JavaScript-navnekonventioner kombineret med disse CSS-navngivningskonventioner kan spare dig tid og kræfter i det lange løb.

 HTML med JavaScript-præfiks 
<knapklasse="js-toggle">Skiftknap>
<divid="js-modal">Modaldiv>

7. Brug beskrivende navne

Du kan bedre forstå et elements formål, funktion eller indhold gennem beskrivende navne.

Overvej eksemplet nedenfor:

/* Ikke-beskrivende navne */
.blå-boks {
/* Styles her */
}
-en {
/* Styles her */
}

Klassens navne blå kasse og -en i eksemplet ovenfor transmitterer ingen relevant information om de komponenter, de refererer til. Fraværet af beskrivende navngivning kan gøre det svært for dig hurtigt at forstå formålene eller rollerne for visse komponenter i programmet.

Brug beskrivende navne, der præcist forklarer elementets rolle forbedre læsbarheden og vedligeholdelsen af ​​koden.

Overvej det forbedrede eksempel nedenfor:

/* Beskrivende navne */
.produkt-kort {
/* Styles her */
}
.navigation-link {
/* Styles her */
}

Klassens navne produkt-kort og navigationslink i den opdaterede version gør det tydeligt, hvilket formål hvert element tjener. Du vil finde det nemmere at udforske og redigere koden med disse beskrivende navne.

Brug af beskrivende navne gavner de nuværende og potentielle fremtidige udviklere, der arbejder på kodebasen. Når du genbesøger koden efter noget tid, kan du nemt forstå strukturen og virkemåden af ​​brikkerne.

8. Brug korte og præcise navne

Selvom karakteristiske navne er vigtige, er det også vigtigt at holde dem kortfattede. Lange klasse- og ID-navne kan gøre koden sværere at læse og vedligeholde. Prøv at finde en balance mellem at være kort og detaljeret. Overvej desuden at bruge velkendte akronymer eller forkortelser i projektsammenhæng.

Overvej det tilfælde, hvor du ønsker at bruge CSS til at tilpasse en navigationsmenu på dit websted. Du kan bruge kortere, mere specifikke navne som f.eks nav-emne eller nav-link i stedet for lange som nav-grænseflade eller hoved-navigation-link.

.nav-item {
/* Styles for navigationsmenupunkter */
}
.nav-link {
/* Styles til navigationslinks */
}

Brug af akronymer eller populære forkortelser i projektsammenhæng, som f.eks nav til navigation, kan gøre koden meget nemmere for andre programmører at forstå.

Bedste praksis for navngivning af CSS-klasser og -id'er

I et JavaScript-projekt er det afgørende at navngive CSS-klasser og ID'er korrekt for kodelæsbarhed, vedligeholdelse og skalerbarhed.

Du kan gøre style sheets enklere og forbedre kvaliteten af ​​koden. At få tid til at opstille gode navnekonventioner vil betale sig i det lange løb ved at gøre det nemmere for dig og andre at forstå og vedligeholde kodebasen.