8 best practices voor het benoemen van CSS-klassen en ID's in een JavaScript-project

De naamgevingsconventies voor CSS-klassen en ID's spelen een belangrijke rol bij het begrijpen en onderhouden van code in een JavaScript-project. De gebruikte namen kunnen de duidelijkheid, herbruikbaarheid en flexibiliteit van de codebase verbeteren. Het volgen van best practices is belangrijk bij het benoemen van CSS-klassen en ID's in een JavaScript-project.

1. Gebruik semantische namen

Het is cruciaal om namen te kiezen die de functie of het doel van het element precies uitleggen. Semantische namen bieden een betekenisvolle context en maken de code begrijpelijker.

Bijvoorbeeld in plaats van traditionele namen als doos of houder, probeer namen als koptekst of zijbalk die de specifieke rol van het onderdeel weerspiegelen.

/* Voorbeeld van semantische namen */
.kop {}
.zijbalk {}

2. Gebruik consistente naamgevingsconventies

Consistentie is de sleutel bij het benoemen van CSS-klassen en ID's. Door over de hele linie dezelfde naamgevingsstandaard te gebruiken, wordt het eenvoudiger om de structuur van de codebase te behouden.

De BEM (Block Element Modifier) ​​en OOCSS (Object-Oriented CSS) naamgevingsconventies zijn de meest geprefereerde naamgevingsconventies.

U kunt de OOCSS-naamgevingsconventie gebruiken om CSS-code te schrijven die modulair, beheersbaar en schaalbaar is. Hier is een illustratie van hoe het kan een navigatiemenu maken OOCSS gebruiken:

/* Structuur */
.nav {
weergave: buigen;
lijst-stijl: geen;
}
.nav__item {
marge-rechts: 1rem;
}
.nav__link {
tekst-decoratie: geen;
kleur: #333;
}
/* Verschijning */
.nav__link:zweven {
tekst-decoratie: onderstrepen;
}

U hebt in dit voorbeeld twee afzonderlijke delen van de code voor het navigatiemenu, een voor de structuur en een voor het uiterlijk. Het uiterlijkgedeelte beschrijft de kleuren en andere stijlen die het een aantrekkelijk uiterlijk geven, terwijl het structuurgedeelte uitlegt hoe en waar de menu-items worden geplaatst.

3. Vermijd naamruimten

In CSS zijn naamruimten semantische structuren waarmee u een naamruimtevoorvoegsel kunt opgeven voor hun selecties. Om onderscheid te maken tussen modules, bibliotheken of andere delen van de codebase die conflicterende klassenamen kunnen hebben, wordt het naamruimtevoorvoegsel gebruikt.

Deze functie is echter nuttig, maar kan problemen met specificiteit en onderhoudbaarheid veroorzaken.

Een van de grootste nadelen van naamruimten is de moeilijkheid bij het omgaan met selectorspecificiteit. Een naamruimtevoorvoegsel kan een selectie specifieker maken, waardoor het moeilijker wordt om stijlen in de toekomst te overschrijven.

Dit leidt tot CSS-code-bloat, dat is verwarrend en uitdagend om in de loop van de tijd te onderhouden.

Neem bijvoorbeeld:

/* Met naamruimte */
.mijn-module.inhoud {
Achtergrond kleur: blauw;
}
/* Zonder naamruimte */
.module-header {
Achtergrond kleur: rood;
}
.module-inhoud {
Achtergrond kleur: geel;
}

Het naamruimtevoorvoegsel .mijn-module En .inhoud worden beide gebruikt in het hoofdcodeblok. De selectie wordt daardoor nauwkeuriger, waardoor toekomstige stijloverheersing uitdagender wordt.

In het tweede deel wordt de naamruimte vervangen door beschrijvende klassennamen .module-header En .module-inhoud. Dit maakt de code niet alleen begrijpelijker, maar ook eenvoudiger te onderhouden.

Het gebruik van naamruimten voegt onnodige complexiteit toe aan uw programma, vooral wanneer veel mensen aan verschillende delen van hetzelfde project werken. U vindt het misschien moeilijk om elkaars code te begrijpen en te wijzigen, omdat verschillende teams verschillende naamruimtevoorvoegsels kunnen gebruiken.

Gebruik klassennamen die beschrijvend zijn, bijvoorbeeld:

.kop {
Achtergrond kleur: rood;
}
.inhoud {
Achtergrond kleur: geel;
}

Door beschrijvende klassenamen te gebruiken, kunt u de vereiste voor naamruimten wegnemen en kunt u uw codebase goed gestructureerd en gemakkelijk te begrijpen houden.

4. Vermijd algemene namen

In JavaScript-projecten is het van cruciaal belang om algemene namen voor CSS-klassen en ID's te vermijden. Globale namen bemoeilijken codeonderhoud en vergroten de mogelijkheid om risico's te benoemen. Om een ​​meer duurzame en schaalbare codebase te garanderen, is het goed dat u preciezere namen gebruikt binnen het bereik van een component of module.

Beschouw het onderstaande voorbeeld:

 Onjuist gebruik van algemene namen 
<divklas="houder">
<divklas="zijbalk">
 Inhoud hier 
div>
div>

De generieke klassennamen zijbalk En container in het bovenstaande voorbeeld zijn vatbaar voor botsingen met andere stijlbladen of JavaScript-code binnen het project. Bijvoorbeeld als twee stylesheets hetzelfde specificeren .zijbalk class, de ene met een blauwe achtergrond en de andere met een rode achtergrond, hangt de kleur van de zijbalk af van de stijlpagina die het laatst wordt geladen. Hierdoor kunnen onverwachte en onvoorspelbare resultaten optreden.

Het is beter om preciezere namen te gebruiken die passen binnen de relevante component of module om deze problemen te minimaliseren.

Kijk naar een verbeterde versie.

 Verbeterd met specifieke namen 
<divklas="header__container">
<divklas="zijbalk__inhoud">
 Inhoud hier 
div>
div>

In de gewijzigde versie zijn de klassennamen header__container En zijbalk__inhoud maak duidelijk waar elk element voor dient en wat het doet.

Het gebruik van specifieke namen vermindert het risico op naamconflicten en zorgt ervoor dat de stijlen alleen van invloed zijn op de verwachte componenten binnen hun respectieve componenten of modules.

5. Gebruik BEM-naamgevingsconventie

De naamgevingsconventie BEM (Block Element Modifier) ​​is populair voor het benoemen van CSS-klassen en ID's in JavaScript-projecten. BEM biedt een gestructureerde en modulaire manier om elementen te benoemen, stimuleert herbruikbaarheid en maakt het onderhouden van codebases eenvoudiger.

BEM-conventies bestaan ​​uit blokken, elementen en modifiers. Een element op hoog niveau of een op zichzelf staand onderdeel wordt een blok genoemd. Elementen zijn de samenstellende delen van een blok die afhankelijk zijn van de context van het blok. Modifiers kunnen het uiterlijk of gedrag van een blok of element veranderen.

Hier is een voorbeeld waarbij de BEM-naamgevingsconventie wordt gebruikt:

/* BEM Naamgevingsconventie voorbeeld */
/* Blokkeren */
.kop {} 
/* Element van het blok */
.header logo {} 
.header__menu {}
/* Aanpasser van het element */
.header__menu--actief {} 

De bovenstaande afbeelding toont een koptekst blok met een logo en een menu element. De menu artikel ontvangt de actief veranderen om aan te geven dat het actief is geworden.

U kunt snel de fundamentele componenten en de verbindingen tussen de verschillende delen identificeren, waardoor de structuur en hiërarchie van de codebase duidelijker wordt.

6. Gebruik voorvoegsels of achtervoegsels

U kunt aanvullende instellingen toevoegen aan CSS-klasse- en ID-namen door ze vooraf of achteraf te fixeren, met name in grotere projecten. U kunt een voorvoegsel gebruiken zoals js- om aan te geven dat een klasse of ID JavaScript-mogelijkheden biedt. JavaScript-naamgevingsconventies in combinatie met deze CSS-naamgevingsconventies kan u op de lange termijn tijd en moeite besparen.

 HTML met JavaScript-voorvoegsel 
<knopklas="js-toggle">Schakelaarknop>
<divID kaart="js-modaal">Modaaldiv>

7. Gebruik beschrijvende namen

U kunt het doel, de functie of de inhoud van een element beter begrijpen door middel van beschrijvende namen.

Beschouw het onderstaande voorbeeld:

/* Niet-beschrijvende namen */
.blauwe doos {
/* Stijlen hier */
}
A {
/* Stijlen hier */
}

De klassennamen blauwe doos En A in het bovenstaande voorbeeld geen relevante informatie verzenden over de componenten waarnaar ze verwijzen. De afwezigheid van beschrijvende naamgeving kan het voor u moeilijk maken om snel de doelen of rollen van bepaalde componenten in het programma te begrijpen.

Gebruik beschrijvende namen die de rol van het element nauwkeurig uitleggen de leesbaarheid en onderhoudbaarheid van de code te verbeteren.

Bekijk het verbeterde voorbeeld hieronder:

/* Beschrijvende namen */
.productkaart {
/* Stijlen hier */
}
.navigatie-link {
/* Stijlen hier */
}

De klassennamen productkaart En navigatie-link in de bijgewerkte versie duidelijk maken welk doel elk element dient. U zult het verkennen en bewerken van de code eenvoudiger vinden met deze beschrijvende namen.

Het gebruik van beschrijvende namen komt ten goede aan de huidige en potentiële toekomstige ontwikkelaars die aan de codebase werken. Als je de code na enige tijd opnieuw bekijkt, kun je de structuur en werking van de stukken gemakkelijk begrijpen.

8. Gebruik korte en beknopte namen

Hoewel onderscheidende namen essentieel zijn, is het ook belangrijk om ze beknopt te houden. Lange klasse- en ID-namen kunnen de code moeilijker te lezen en te onderhouden maken. Probeer een balans te vinden tussen kort zijn en gedetailleerd zijn. Overweeg bovendien om bekende acroniemen of afkortingen te gebruiken in de projectcontext.

Overweeg het geval waarin u CSS wilt gebruiken om een ​​navigatiemenu op uw website aan te passen. U kunt kortere, specifiekere namen gebruiken, zoals nav-item of navigatie-link in plaats van lange zoals nav-interface of hoofd-navigatie-link.

.nav-item {
/* Stijlen voor navigatiemenu-items */
}
.nav-link {
/* Stijlen voor navigatielinks */
}

Het gebruik van acroniemen of populaire afkortingen in de projectcontext, zoals navigatie voor navigatie, kan de code voor andere programmeurs veel gemakkelijker te begrijpen maken.

Best practices voor het benoemen van CSS-klassen en ID's

In een JavaScript-project is het cruciaal om CSS-klassen en ID's de juiste naam te geven voor de leesbaarheid, het onderhoud en de schaalbaarheid van de code.

U kunt stijlbladen eenvoudiger maken en de kwaliteit van de code verbeteren. Tijd maken om goede naamgevingsconventies op te stellen, zal op de lange termijn zijn vruchten afwerpen doordat het voor u en anderen gemakkelijker wordt om de codebase te begrijpen en te onderhouden.