8 beste fremgangsmåter for å navngi CSS-klasser og ID-er i et JavaScript-prosjekt

Navnekonvensjonene for CSS-klasser og ID-er har en betydelig rolle i å forstå og vedlikeholde kode i et JavaScript-prosjekt. Navnene som brukes kan forbedre kodebasens klarhet, gjenbrukbarhet og fleksibilitet. Å følge beste praksis er viktig når du navngir CSS-klasser og ID-er i et JavaScript-prosjekt.

1. Bruk semantiske navn

Å velge navn som presist forklarer elementets funksjon eller formål er avgjørende. Semantiske navn gir meningsfull kontekst og gjør koden lettere å forstå.

For eksempel, i stedet for å bruke tradisjonelle navn som eske eller holder, prøv å bruke navn som Overskrift eller sidefelt som gjenspeiler den spesifikke rollen til komponenten.

/* Eksempel på semantiske navn */
.Overskrift {}
.sidefelt {}

2. Bruk konsistente navnekonvensjoner

Konsistens er nøkkelen når du navngir CSS-klasser og ID-er. Å bruke samme navnestandard over hele linja gjør det enklere å vedlikeholde strukturen til kodebasen.

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

Du kan bruke OOCSS-navnekonvensjonen til å skrive CSS-kode som er modulær, håndterbar og skalerbar. Her er en illustrasjon av hvordan du kan lage en navigasjonsmeny bruker OOCSS:

/* Struktur */
.nav {
vise: bøye seg;
liste-stil: ingen;
}
.nav__item {
marg-høyre: 1rem;
}
.nav__link {
tekst-dekorasjon: ingen;
farge: #333;
}
/* Utseende */
.nav__link:sveve {
tekst-dekorasjon: understreke;
}

Du har to distinkte deler av koden for navigasjonsmenyen i dette eksemplet, en for strukturen og en for utseendet. Utseendedelen beskriver fargene og andre stiler som gir den et tiltalende utseende, mens strukturdelen forklarer hvordan og hvor menyelementene skal plasseres.

3. Unngå navneområder

I CSS er navnerom semantiske strukturer som lar deg gi et navneromprefiks for valgene deres. For å skille mellom moduler, biblioteker eller andre deler av kodebasen som kan ha motstridende klassenavn, brukes navneromsprefikset.

Denne funksjonen er nyttig, men den kan forårsake problemer med spesifisitet og vedlikehold.

En av de største ulempene med navnerom er vanskeligheten med å håndtere velgerspesifisitet. Et navneområdeprefiks kan gjøre et valg mer spesifikt, noe som gjør det vanskeligere å overstyre stiler i fremtiden.

Dette fører til oppblåst CSS-kode, som er forvirrende og utfordrende å vedlikeholde over tid.

Ta for eksempel:

/* Med navneområde */
.min-modul.innhold {
bakgrunnsfarge: blå;
}
/* Uten navneområde */
.modul-header {
bakgrunnsfarge: rød;
}
.modul-innhold {
bakgrunnsfarge: gul;
}

Navneområdeprefikset .min-modul og .innhold brukes begge i hovedblokken med kode. Utvalget blir mer presist som et resultat, noe som gjør fremtidig stiloverstyring mer utfordrende.

I den andre delen erstattes navnerommet med beskrivende klassenavn .modul-header og .modul-innhold. I tillegg til å gjøre koden lettere å forstå, gjør dette den også enklere å vedlikeholde.

Å bruke navnerom gir unødvendig kompleksitet til programmet, spesielt når mange mennesker jobber med forskjellige deler av det samme prosjektet. Du kan finne det vanskelig å forstå og endre hverandres kode siden forskjellige team kan bruke forskjellige navneromsprefikser.

Bruk klassenavn som er beskrivende for eksempel:

.Overskrift {
bakgrunnsfarge: rød;
}
.innhold {
bakgrunnsfarge: gul;
}

Ved å bruke beskrivende klassenavn kan du gjøre opp med kravet til navneområder, og du kan holde kodebasen din velstrukturert og lett å forstå.

4. Unngå globale navn

I JavaScript-prosjekter er det avgjørende å unngå globale navn for CSS-klasser og ID-er. Globale navn kompliserer kodevedlikehold og øker muligheten for navnerisiko. For å sikre en mer varig og skalerbar kodebase, er det bra at du bruker mer presise navn innenfor rammen av en komponent eller modul.

Tenk på eksemplet nedenfor:

 Feil bruk av globale navn 
<divklasse="container">
<divklasse="sidefelt">
 Innhold her 
div>
div>

De generiske klassenavnene sidefelt og container i eksemplet ovenfor er utsatt for sammenstøt med andre stilark eller JavaScript-kode inne i prosjektet. For eksempel hvis to stilark spesifiserer det samme .sidefelt klasse, den ene med blå bakgrunn og den andre med rød bakgrunn, vil sidefeltets farge avhenge av hvilket stilark som laster sist. Uventede og uforutsigbare resultater kan oppstå fra dette.

Det er bedre å bruke mer presise navn som omfatter den relevante komponenten eller modulen for å minimere disse problemene.

Se på en forbedret versjon.

 Forbedret med spesifikke navn 
<divklasse="header__container">
<divklasse="sidebar__innhold">
 Innhold her 
div>
div>

I den endrede versjonen er klassenavnene header__container og sidefelt__innhold gjøre det klart hva hvert element er for og hva det gjør.

Bruk av spesifikke navn reduserer risikoen for navnekonflikter og sikrer at stilene kun påvirker de forventede komponentene i deres respektive komponenter eller moduler.

5. Bruk BEM navnekonvensjon

BEM-navnekonvensjonen (Block Element Modifier) ​​er populær for å navngi CSS-klasser og ID-er i JavaScript-prosjekter. BEM gir en strukturert og modulær måte å navngi elementer på, oppmuntrer til gjenbruk og gjør vedlikehold av kodebaser enklere.

BEM-konvensjoner består av blokker, elementer og modifikatorer. Et høynivåelement eller en frittstående komponent kalles en blokk. Elementer er komponentdelene av en blokk som er avhengig av konteksten til blokken. Modifikatorer kan endre utseendet eller oppførselen til en blokk eller et element.

Her er et eksempel som bruker BEM-navnekonvensjonen:

/* BEM navnekonvensjon eksempel */
/* Blokker */
.Overskrift {} 
/* Element av blokken */
.header logo {} 
.header__meny {}
/* Modifikator av elementet */
.header__meny--aktiv {} 

Illustrasjonen ovenfor viser en Overskrift blokk med en logo og a Meny element. De Meny varen mottar aktiv endre for å vise at den har blitt aktiv.

Du kan raskt identifisere de grunnleggende komponentene og forbindelsene mellom de ulike delene, noe som gjør strukturen og hierarkiet til kodebasen klarere.

6. Bruk prefikser eller suffikser

Du kan legge til flere innstillinger til CSS-klasse- og ID-navn ved å sette dem foran eller etterfikse, spesielt i større prosjekter. Du kan bruke et prefiks som js- for å indikere at en klasse eller ID tilbyr JavaScript-funksjoner. JavaScript-navnekonvensjoner kombinert med disse CSS-navnekonvensjonene kan spare deg for tid og krefter i det lange løp.

 HTML med JavaScript-prefiks 
<knappklasse="js-toggle">Veksleknapp>
<divid="js-modal">Modaldiv>

7. Bruk beskrivende navn

Du kan bedre forstå et elements formål, funksjon eller innhold gjennom beskrivende navn.

Tenk på eksemplet nedenfor:

/* Ikke-beskrivende navn */
.blå-boks {
/* Stiler her */
}
en {
/* Stiler her */
}

Klassenavnene blå boks og en i eksemplet ovenfor overfører ingen relevant informasjon om komponentene de refererer til. Fraværet av beskrivende navn kan gjøre det vanskelig for deg å raskt forstå formålene eller rollene til visse komponenter i programmet.

Bruk beskrivende navn som nøyaktig forklarer elementets rolle forbedre lesbarheten og vedlikeholdet av koden.

Tenk på det forbedrede eksemplet nedenfor:

/* Beskrivende navn */
.produkt-kort {
/* Stiler her */
}
.navigasjonslink {
/* Stiler her */
}

Klassenavnene produkt-kort og navigasjonslink i den oppdaterte versjonen gjør det åpenbart hvilket formål hvert element tjener. Du vil finne det enklere å utforske og redigere koden med disse beskrivende navnene.

Å bruke beskrivende navn er til fordel for nåværende og potensielle fremtidige utviklere som jobber med kodebasen. Når du går tilbake til koden etter en stund, kan du enkelt forstå strukturen og virkemåten til brikkene.

8. Bruk korte og konsise navn

Selv om særegne navn er avgjørende, er det også viktig å holde dem konsise. Lange klasse- og ID-navn kan gjøre koden vanskeligere å lese og vedlikeholde. Prøv å finne en balanse mellom å være kort og detaljert. Vurder i tillegg å bruke kjente akronymer eller forkortelser i prosjektsammenheng.

Tenk på tilfellet der du ønsker å bruke CSS for å tilpasse en navigasjonsmeny på nettstedet ditt. Du kan bruke kortere, mer spesifikke navn som nav-element eller nav-link i stedet for lange som nav-grensesnitt eller hoved-navigasjonslink.

.nav-element {
/* Stiler for navigasjonsmenyelementer */
}
.nav-link {
/* Stiler for navigasjonslenker */
}

Bruk av akronymer eller populære forkortelser i prosjektsammenheng, som f.eks nav til navigasjon, kan gjøre koden mye enklere å forstå for andre programmerere.

Beste praksis for navngiving av CSS-klasser og ID-er

I et JavaScript-prosjekt er det avgjørende å navngi CSS-klasser og ID-er på riktig måte for kodelesbarhet, vedlikehold og skalerbarhet.

Du kan gjøre stilark enklere og forbedre kvaliteten på koden. Å sette av tid til å sette opp gode navnekonvensjoner vil lønne seg i det lange løp ved å gjøre det enklere for deg og andre å forstå og vedlikeholde kodebasen.