Utvecklare kämpar ofta med att namnge CSS-klasser och ID: n. Följ dessa bästa metoder för effektiv namngivning.
Namnkonventionerna för CSS-klasser och ID: n spelar en viktig roll för att förstå och underhålla kod i ett JavaScript-projekt. Namnen som används kan förbättra kodbasens tydlighet, återanvändbarhet och flexibilitet. Att följa bästa praxis är viktigt när du namnger CSS-klasser och ID: n i ett JavaScript-projekt.
1. Använd semantiska namn
Att välja namn som exakt förklarar elementets funktion eller syfte är avgörande. Semantiska namn ger ett meningsfullt sammanhang och gör koden lättare att förstå.
Till exempel, istället för att använda traditionella namn som låda eller hållare, prova att använda namn som rubrik eller sidofältet som återspeglar komponentens specifika roll.
/* Exempel på semantiska namn */
.rubrik {}
.sidebar {}
2. Använd konsekventa namnkonventioner
Konsekvens är nyckeln när man namnger CSS-klasser och ID: n. Att använda samma namnstandard över hela linjen gör det enklare att underhålla kodbasens struktur.
Namnkonventionerna BEM (Block Element Modifier) och OOCSS (Object-Oriented CSS) är de mest föredragna namnkonventionerna.
Du kan använda OOCSS-namnkonventionen för att skriva CSS-kod som är modulär, hanterbar och skalbar. Här är en illustration av hur du kan skapa en navigeringsmeny använder OOCSS:
/* Struktur */.nav {
visa: böja;
liststil: ingen;
}.nav__item {
marginal-höger: 1rem;
}.nav__länk {
text-dekoration: ingen;
Färg: #333;
}/* Utseende */
.nav__länk:sväva {
text-dekoration: Understrykning;
}
Du har två distinkta delar av koden för navigeringsmenyn i det här exemplet, en för strukturen och en för utseendet. Utseendedelen beskriver färgerna och andra stilar som ger den ett tilltalande utseende, medan strukturdelen förklarar hur och var menyalternativen kommer att placeras.
3. Undvik namnutrymmen
I CSS är namnutrymmen semantiska strukturer som låter dig ange ett namnområdesprefix för deras val. För att skilja mellan moduler, bibliotek eller andra delar av kodbasen som kan ha motstridiga klassnamn, används namnutrymmesprefixet.
Den här funktionen är användbar, men den kan orsaka problem med specificitet och underhåll.
En av de största nackdelarna med namnutrymmen är svårigheten att hantera väljarspecificitet. Ett namnområdesprefix kan göra ett urval mer specifikt, vilket gör det svårare att åsidosätta stilar i framtiden.
Detta leder till uppblåst CSS-kod, som är förvirrande och utmanande att underhålla över tid.
Ta till exempel:
/* Med namnutrymme */.min-modul.innehåll {
bakgrundsfärg: blå;
}/* Utan namnutrymme */
.modul-header {
bakgrundsfärg: röd;
}.modul-innehåll {
bakgrundsfärg: gul;
}
Namnutrymmesprefixet .min-modul och .innehåll används båda i huvudblocket med kod. Urvalet blir mer exakt som ett resultat, vilket gör framtida stilöverskridande mer utmanande.
I den andra delen ersätts namnområdet med beskrivande klassnamn .modul-header och .modul-innehåll. Förutom att göra koden lättare att förstå, gör detta den också enklare att underhålla.
Att använda namnrymder lägger till onödig komplexitet till ditt program, särskilt när många människor arbetar med olika delar av samma projekt. Du kan ha svårt att förstå och ändra varandras kod eftersom olika team kan använda olika namnområdesprefix.
Använd klassnamn som är beskrivande till exempel:
.rubrik {bakgrundsfärg: röd;
}
.innehåll {
bakgrundsfärg: gul;
}
Genom att använda beskrivande klassnamn kan du avskaffa kravet på namnutrymmen, och du kan hålla din kodbas välstrukturerad och lätt att förstå.
4. Undvik globala namn
I JavaScript-projekt är det viktigt att undvika globala namn för CSS-klasser och ID: n. Globala namn komplicerar kodunderhållet och ökar möjligheten att namnge risker. För att säkerställa en mer hållbar och skalbar kodbas är det bra att du använder mer exakta namn inom ramen för en komponent eller modul.
Tänk på exemplet nedan:
Felaktig användning av globala namn<divklass="behållare">
<divklass="sidofält">Innehåll här
div>
div>
De generiska klassnamnen sidofältet och behållare i exemplet ovan är känsliga för konflikter med andra stilmallar eller JavaScript-kod inuti projektet. Till exempel, om två stilmallar anger samma .sidebar klass, en med blå bakgrund och den andra med röd bakgrund, kommer sidofältets färg att bero på vilken stilmall som senast laddas. Oväntade och oförutsägbara resultat kan uppstå av detta.
Det är bättre att använda mer exakta namn som täcker in den relevanta komponenten eller modulen för att minimera dessa problem.
Titta på en förbättrad version.
Förbättrad med specifika namn<divklass="header__container">
<divklass="sidebar__content">Innehåll här
div>
div>
I den ändrade versionen, klassnamnen header__container och sidofält__innehåll gör det tydligt vad varje element är till för och vad det gör.
Att använda specifika namn minskar risken för namnkonflikter och säkerställer att stilarna endast påverkar de förväntade komponenterna inuti sina respektive komponenter eller moduler.
5. Använd BEM Naming Convention
Namnkonventionen BEM (Block Element Modifier) är populär för att namnge CSS-klasser och ID: n i JavaScript-projekt. BEM tillhandahåller ett strukturerat och modulärt sätt att namnge element, uppmuntrar återanvändbarhet och gör underhållet av kodbaser enklare.
BEM-konventioner består av block, element och modifierare. Ett högnivåelement eller en fristående komponent kallas ett block. Element är komponentdelarna av ett block som förlitar sig på blockets kontext. Modifierare kan ändra utseendet eller beteendet hos ett block eller element.
Här är ett exempel som använder BEM-namnkonventionen:
/* Exempel på BEM Naming Convention *//* Blockera */
.rubrik {}/* Element av blocket */
.rubriklogga {}
.header__menu {}
/* Modifierare av elementet */
.header__menu--active {}
Ovanstående illustration visar en rubrik block med en logotyp och a meny element. De meny objektet får aktiva ändra för att visa att den har blivit aktiv.
Du kan snabbt identifiera de grundläggande komponenterna och kopplingarna mellan de olika delarna, vilket gör kodbasens struktur och hierarki tydligare.
6. Använd prefix eller suffix
Du kan lägga till ytterligare inställningar till CSS-klass- och ID-namn genom att prefixa eller efterfixa dem, särskilt i större projekt. Du kan använda ett prefix som js- för att indikera att en klass eller ID erbjuder JavaScript-funktioner. Namnkonventioner för JavaScript I kombination med dessa CSS-namnkonventioner kan du spara tid och ansträngning i det långa loppet.
HTML med JavaScript-prefix<knappklass="js-toggle">Växlaknapp>
<divid="js-modal">Modaldiv>
7. Använd beskrivande namn
Du kan bättre förstå ett elements syfte, funktion eller innehåll genom beskrivande namn.
Tänk på exemplet nedan:
/* Icke-beskrivande namn */.blå-box {
/* Stilar här */
}
a {
/* Stilar här */
}
Klassens namn blå låda och a i exemplet ovan överför ingen relevant information om komponenterna de refererar till. Frånvaron av beskrivande namn kan göra det svårt för dig att snabbt förstå syftet eller rollerna för vissa komponenter i programmet.
Använd beskrivande namn som korrekt förklarar elementets roll förbättra kodens läsbarhet och underhållbarhet.
Tänk på det förbättrade exemplet nedan:
/* Beskrivande namn */.produkt-kort {
/* Stilar här */
}
.navigations-länk {
/* Stilar här */
}
Klassens namn produkt-kort och navigeringslänk i den uppdaterade versionen gör det uppenbart vilket syfte varje element tjänar. Du kommer att upptäcka att utforska och redigera koden enklare med dessa beskrivande namn.
Att använda beskrivande namn gynnar nuvarande och potentiella framtida utvecklare som arbetar med kodbasen. När du återbesöker koden efter en tid kan du enkelt förstå strukturen och funktion av bitarna.
8. Använd korta och koncisa namn
Även om distinkta namn är viktiga, är det också viktigt att hålla dem kortfattade. Långa klass- och ID-namn kan göra koden svårare att läsa och underhålla. Försök att hitta en balans mellan att vara kortfattad och att vara detaljerad. Överväg dessutom att använda välkända akronymer eller förkortningar i projektsammanhang.
Tänk på fallet där du vill använda CSS för att anpassa en navigeringsmeny på din webbplats. Du kan använda kortare, mer specifika namn som nav-objekt eller nav-länk istället för långa som nav-gränssnitt eller huvud-navigeringslänk.
.nav-objekt {
/* Stilar för navigeringsmenyalternativ */
}
.nav-länk {
/* Stilar för navigeringslänkar */
}
Att använda akronymer eller populära förkortningar i projektsammanhang, som t.ex nav för navigering, kan göra koden mycket lättare för andra programmerare att förstå.
Bästa metoder för att namnge CSS-klasser och ID: n
I ett JavaScript-projekt är det avgörande att på lämpligt sätt namnge CSS-klasser och ID för kodläsbarhet, underhåll och skalbarhet.
Du kan göra stilmallar enklare och förbättra kodens kvalitet. Att ta sig tid att sätta upp bra namnkonventioner kommer att löna sig i längden genom att göra det lättare för dig och andra att förstå och underhålla kodbasen.