8 migliori pratiche per denominare classi e ID CSS in un progetto JavaScript
Gli sviluppatori spesso hanno difficoltà a denominare classi e ID CSS. Segui queste best practice per una denominazione efficiente.
Le convenzioni di denominazione per le classi e gli ID CSS hanno un ruolo significativo nella comprensione e nella manutenzione del codice in un progetto JavaScript. I nomi utilizzati possono migliorare la chiarezza, la riusabilità e la flessibilità del codice base. Seguire le migliori pratiche è importante quando si denominano classi e ID CSS in un progetto JavaScript.
1. Usa nomi semantici
Scegliere nomi che spieghino con precisione la funzione o lo scopo dell'elemento è fondamentale. I nomi semantici forniscono un contesto significativo e rendono il codice più facile da comprendere.
Ad esempio, invece di utilizzare nomi tradizionali come box o holder, prova a utilizzare nomi come header o sidebar che riflettono il ruolo specifico del componente.
/* Semantic names example */
.header {}
.sidebar {}2. Utilizzare convenzioni di denominazione coerenti
La coerenza è fondamentale quando si denominano classi e ID CSS. L'utilizzo dello stesso standard di denominazione su tutta la linea semplifica il mantenimento della struttura della base di codice.
Le convenzioni di denominazione BEM (Block Element Modifier) e OOCSS (Object-Oriented CSS) sono le convenzioni di denominazione più preferite.
Puoi utilizzare la convenzione di denominazione OOCSS per scrivere codice CSS modulare, gestibile e scalabile. Ecco un'illustrazione di come creare un menu di navigazione utilizzando OOCSS:
/* Structure */
.nav {
display: flex;
list-style: none;
}
.nav__item {
margin-right: 1rem;
}
.nav__link {
text-decoration: none;
color: #333;
}
/* Appearance */
.nav__link:hover {
text-decoration: underline;
}In questo esempio hai due parti distinte del codice per il menu di navigazione, una per la struttura e una per l'aspetto. La parte relativa all'aspetto descrive i colori e gli altri stili che gli conferiscono un aspetto accattivante, mentre la sezione relativa alla struttura spiega come e dove verranno posizionate le voci del menu.
3. Evita gli spazi dei nomi
Nei CSS, gli spazi dei nomi sono strutture semantiche che consentono di fornire un prefisso dello spazio dei nomi per le loro selezioni. Per distinguere tra moduli, librerie o altre parti della codebase che potrebbero avere nomi di classe in conflitto, viene utilizzato il prefisso dello spazio dei nomi.
Questa funzionalità è utile, tuttavia, potrebbe causare problemi di specificità e manutenibilità.
Uno dei maggiori svantaggi dei namespace è la difficoltà nel gestire la specificità del selettore. Un prefisso dello spazio dei nomi può rendere una selezione più particolare, rendendo più difficile la sostituzione degli stili in futuro.
Ciò porta a un ingrossamento del codice CSS, che crea confusione ed è difficile da mantenere nel tempo.
Prendiamo ad esempio:
/* With namespace */
.my-module .content {
background-color: blue;
}
/* Without namespace */
.module-header {
background-color: red;
}
.module-content {
background-color: yellow;
}Il prefisso dello spazio dei nomi .my-module e .content sono entrambi utilizzati nel blocco principale del codice. Di conseguenza, la selezione diventa più precisa, rendendo più impegnativa la priorità dello stile futuro.
Nella seconda parte, lo spazio dei nomi è sostituito dai nomi di classe descrittivi .module-header e .module-content. Oltre a rendere il codice più semplice da comprendere, ciò ne semplifica anche la manutenzione.
L'uso degli spazi dei nomi aggiunge complessità non necessaria al tuo programma, specialmente quando molte persone lavorano su parti diverse dello stesso progetto. Potrebbe essere difficile comprendere e modificare il codice degli altri poiché team diversi possono utilizzare prefissi di spazi dei nomi diversi.
Utilizza nomi di classe descrittivi, ad esempio:
.header {
background-color: red;
}
.content {
background-color: yellow;
}Utilizzando nomi di classe descrittivi, puoi eliminare i requisiti per gli spazi dei nomi e mantenere la base di codice ben strutturata e di facile comprensione.
4. Evita nomi globali
Nei progetti JavaScript, è fondamentale evitare nomi globali per classi e ID CSS. I nomi globali complicano la manutenzione del codice e aumentano la possibilità di nominare i rischi. Per garantire una base di codice più duratura e scalabile, è bene utilizzare nomi più precisi nell'ambito di un componente o modulo.
Considera l'esempio seguente:
<!-- Incorrect use of global names -->
<div class="container">
<div class="sidebar">
<!-- Content here -->
</div>
</div>I nomi generici delle classi sidebar e container nell'esempio precedente sono suscettibili di conflitti con altri fogli di stile o codice JavaScript all'interno del progetto. Ad esempio, se due fogli di stile specificano la stessa classe .sidebar , uno con uno sfondo blu e l'altro con uno sfondo rosso, il colore della barra laterale dipenderà da quale foglio di stile verrà caricato per ultimo. Da ciò potrebbero derivare risultati imprevisti e imprevedibili.
È preferibile utilizzare nomi più precisi che rientrino nel componente o modulo pertinente per ridurre al minimo questi problemi.
Guarda una versione migliorata.
<!-- Improved with specific names -->
<div class="header__container">
<div class="sidebar__content">
<!-- Content here -->
</div>
</div>Nella versione modificata, i nomi delle classi header__container e sidebar__content rendono chiaro a cosa serve ogni elemento e cosa fa.
L'utilizzo di nomi specifici riduce il rischio di conflitti di denominazione e garantisce che gli stili influiscano solo sui componenti previsti all'interno dei rispettivi componenti o moduli.
5. Utilizzare la convenzione di denominazione BEM
La convenzione di denominazione BEM (Block Element Modifier) è popolare per denominare classi e ID CSS nei progetti JavaScript. BEM fornisce un modo strutturato e modulare per denominare gli elementi, incoraggia la riusabilità e semplifica la manutenzione delle basi di codice.
Le convenzioni BEM sono costituite da blocchi, elementi e modificatori. Un elemento di alto livello o un componente autonomo è chiamato blocco. Gli elementi sono le parti componenti di un blocco che si basano sul contesto del blocco. I modificatori possono modificare l'aspetto o il comportamento di un blocco o elemento.
Ecco un esempio che utilizza la convenzione di denominazione BEM:
/* BEM Naming Convention example */
/* Block */
.header {}
/* Element of the block */
.header__logo {}
.header__menu {}
/* Modifier of the element */
.header__menu--active {} L'illustrazione sopra mostra un blocco intestazione con un logo e un elemento menu. La voce di menu riceve la modifica attiva per mostrare che è diventata attiva.
Puoi identificare rapidamente i componenti fondamentali e le connessioni tra le varie porzioni, rendendo più chiara la struttura e la gerarchia della codebase.
6. Usa prefissi o suffissi
Puoi aggiungere ulteriori impostazioni ai nomi delle classi e degli ID CSS inserendoli come prefisso o postfisso, in particolare nei progetti più grandi. Puoi utilizzare un prefisso come js- per indicare che una classe o un ID offre funzionalità JavaScript. Le convenzioni di denominazione JavaScript abbinate a queste convenzioni di denominazione CSS possono farti risparmiare tempo e fatica a lungo termine.
<!-- HTML with JavaScript prefix -->
<button class="js-toggle">Toggle</button>
<div id="js-modal">Modal</div>7. Utilizzare nomi descrittivi
Puoi comprendere meglio lo scopo, la funzione o il contenuto di un elemento attraverso nomi descrittivi.
Considera l'esempio seguente:
/* Non-descriptive names */
.blue-box {
/* Styles here */
}
a {
/* Styles here */
}I nomi delle classi blue-box e a nell'esempio sopra non trasmettono informazioni rilevanti sui componenti a cui fanno riferimento. L'assenza di nomi descrittivi può rendere difficile comprendere rapidamente gli scopi o i ruoli di determinati componenti all'interno del programma.
Utilizza nomi descrittivi che spieghino accuratamente il ruolo dell'elemento per migliorare la leggibilità e la manutenibilità del codice.
Considera l'esempio migliorato di seguito:
/* Descriptive names */
.product-card {
/* Styles here */
}
.navigation-link {
/* Styles here */
}I nomi delle classi product-card e navigation-link nella versione aggiornata rendono evidente lo scopo di ciascun elemento. Troverai più semplice esplorare e modificare il codice con questi nomi descrittivi.
L'uso di nomi descrittivi avvantaggia gli sviluppatori presenti e potenziali futuri che lavorano sulla base di codice. Quando si rivisita il codice dopo un po' di tempo, è possibile comprendere facilmente la struttura e il funzionamento dei pezzi.
8. Usa nomi brevi e concisi
Sebbene i nomi distintivi siano essenziali, è importante anche mantenerli concisi. I nomi lunghi di classi e ID potrebbero rendere il codice più difficile da leggere e gestire. Cerca di trovare un equilibrio tra essere breve ed essere dettagliato. Inoltre, valuta la possibilità di utilizzare acronimi o abbreviazioni noti nel contesto del progetto.
Considera il caso in cui desideri utilizzare i CSS per personalizzare un menu di navigazione sul tuo sito web. Puoi utilizzare nomi più brevi e più specifici come nav-item o nav-link invece di nomi lunghi come nav-interface o main -link-navigazione.
.nav-item {
/* Styles for navigation menu items */
}
.nav-link {
/* Styles for navigation links */
}L'utilizzo di acronimi o abbreviazioni popolari nel contesto del progetto, come nav per navigazione, potrebbe rendere il codice molto più semplice da comprendere per gli altri programmatori.
Migliori pratiche per denominare classi e ID CSS
In un progetto JavaScript, è fondamentale denominare in modo appropriato le classi e gli ID CSS per la leggibilità, la manutenzione e la scalabilità del codice.
Puoi semplificare i fogli di stile e migliorare la qualità del codice. Prendersi il tempo per definire buone convenzioni di denominazione ripagherà a lungo termine rendendo più semplice per te e per gli altri comprendere e mantenere la base di codice.