8 best practice per la denominazione di classi e ID CSS in un progetto JavaScript

Le convenzioni di denominazione per le classi e gli ID CSS hanno un ruolo significativo nella comprensione e nella gestione del codice in un progetto JavaScript. I nomi utilizzati possono migliorare la chiarezza, la riusabilità e la flessibilità della base di codice. Seguire le migliori pratiche è importante quando si denominano classi e ID CSS in un progetto JavaScript.

1. Usa nomi semantici

La scelta di 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 capire.

Ad esempio, invece di utilizzare nomi tradizionali come scatola O titolare, prova a usare nomi come intestazione O barra laterale che riflettono il ruolo specifico del componente.

/* Esempio di nomi semantici */
.intestazione {}
.barra laterale {}

2. Utilizzare convenzioni di denominazione coerenti

La coerenza è fondamentale quando si nominano classi e ID CSS. L'uso 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.

È possibile utilizzare la convenzione di denominazione OOCSS per scrivere codice CSS modulare, gestibile e scalabile. Ecco un'illustrazione di come puoi creare un menu di navigazione utilizzando OOCSS:

/* Struttura */
.nav {
Schermo: flettere;
in stile elenco: nessuno;
}
.nav__item {
margine destro: 1rem;
}
.nav__link {
decorazione del testo: nessuno;
colore: #333;
}
/* Aspetto */
.nav__link: al passaggio del mouse {
decorazione del testo: sottolineare;
}

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 dell'aspetto descrive i colori e altri stili che gli conferiscono un aspetto accattivante, mentre la sezione della struttura spiega come e dove saranno posizionate le voci di 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 base di codice che potrebbero avere nomi di classe in conflitto, viene utilizzato il prefisso dello spazio dei nomi.

Questa funzione è utile, tuttavia può causare problemi di specificità e manutenibilità.

Uno dei maggiori svantaggi degli spazi dei nomi è la difficoltà nel gestire la specificità del selettore. Un prefisso dello spazio dei nomi può rendere una selezione più particolare, rendendo più difficile l'override degli stili in futuro.

Questo porta a un codice CSS gonfio, confuso e difficile da mantenere nel tempo.

Prendi, ad esempio:

/* Con spazio dei nomi */
.mio-modulo.contenuto {
colore di sfondo: blu;
}
/* Senza namespace */
.module-header {
colore di sfondo: rosso;
}
.module-contenuto {
colore di sfondo: giallo;
}

Il prefisso dello spazio dei nomi .mio-modulo E .contenuto sono entrambi utilizzati nel blocco principale di codice. Di conseguenza, la selezione diventa più precisa, rendendo più impegnativa la sostituzione dello stile futuro.

Nella seconda parte, lo spazio dei nomi è sostituito da nomi di classe descrittivi .module-header E .module-contenuto. Oltre a rendere il codice più facile da capire, questo lo rende anche più semplice da mantenere.

L'utilizzo degli spazi dei nomi aggiunge complessità non necessarie al programma, specialmente quando molte persone lavorano su parti diverse dello stesso progetto. Potresti trovare difficile capire e modificare il codice degli altri poiché team diversi possono utilizzare prefissi di spazio dei nomi diversi.

Usa nomi di classe descrittivi, ad esempio:

.intestazione {
colore di sfondo: rosso;
}
.contenuto {
colore di sfondo: giallo;
}

Utilizzando nomi di classe descrittivi, puoi eliminare il requisito per gli spazi dei nomi e puoi mantenere la tua base di codice ben strutturata e facile da capire.

4. Evita i 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:

 Uso errato dei nomi globali 
<divclasse="contenitore">
<divclasse="barra laterale">
 Contenuto qui 
div>
div>

I nomi generici delle classi barra laterale E contenitore 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 lo stesso .barra laterale class, uno con sfondo blu e l'altro con sfondo rosso, il colore della barra laterale dipenderà da quale foglio di stile viene caricato per ultimo. Da ciò possono derivare risultati imprevisti e imprevedibili.

È preferibile utilizzare nomi più precisi che rientrino nel componente o nel modulo pertinente per ridurre al minimo questi problemi.

Guarda una versione migliorata.

 Migliorato con nomi specifici 
<divclasse="intestazione__contenitore">
<divclasse="barra_laterale_contenuto">
 Contenuto qui 
div>
div>

Nella versione modificata, i nomi delle classi header__contenitore E sidebar__content chiarisci 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 influenzino solo i 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 la denominazione di classi e ID CSS nei progetti JavaScript. BEM fornisce un modo strutturato e modulare di nominare 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 di un elemento.

Ecco un esempio che utilizza la convenzione di denominazione BEM:

/* Esempio di convenzione di denominazione BEM */
/* Blocca */
.intestazione {} 
/* Elemento del blocco */
.header__logo {} 
.header__menu {}
/* Modificatore dell'elemento */
.header__menu--attivo {} 

L'illustrazione sopra mostra a intestazione blocco con a logo e un menù elemento. IL menù l'articolo riceve il attivo cambiare per mostrare che è diventato attivo.

Puoi identificare rapidamente i componenti fondamentali e le connessioni tra le varie porzioni, rendendo più chiara la struttura e la gerarchia della base di codice.

6. Usa prefissi o suffissi

È possibile aggiungere ulteriori impostazioni ai nomi delle classi e degli ID CSS aggiungendo un prefisso o un postfisso, in particolare nei progetti più grandi. Puoi usare un prefisso come js- per indicare che una classe o un ID offre funzionalità JavaScript. Convenzioni di denominazione JavaScript insieme a queste convenzioni di denominazione CSS può farti risparmiare tempo e fatica a lungo termine.

 HTML con prefisso JavaScript 
<pulsanteclasse="js-toggle">Alternapulsante>
<divid="js-modal">Modalediv>

7. Usa nomi descrittivi

Puoi comprendere meglio lo scopo, la funzione o il contenuto di un elemento attraverso nomi descrittivi.

Considera l'esempio seguente:

/* Nomi non descrittivi */
.scatola blu {
/* Stili qui */
}
UN {
/* Stili qui */
}

I nomi delle classi scatola blu E UN nell'esempio precedente non trasmettono informazioni rilevanti sui componenti a cui fanno riferimento. L'assenza di denominazione descrittiva può rendere difficile la rapida comprensione degli scopi o dei ruoli di determinati componenti all'interno del programma.

Usa nomi descrittivi che spieghino accuratamente il ruolo dell'elemento a migliorare la leggibilità e la manutenibilità del codice.

Considera l'esempio migliorato di seguito:

/* Nomi descrittivi */
.scheda-prodotto {
/* Stili qui */
}
.link di navigazione {
/* Stili qui */
}

I nomi delle classi scheda-prodotto E link di navigazione nella versione aggiornata rendi evidente lo scopo di ciascun elemento. Scoprirai che l'esplorazione e la modifica del codice sono più semplici 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, si può facilmente capire 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 di classi e ID lunghi potrebbero rendere il codice più difficile da leggere e mantenere. Cerca di trovare un equilibrio tra essere breve ed essere dettagliato. Inoltre, considera l'utilizzo di acronimi o abbreviazioni ben 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 usare nomi più brevi e più specifici come elemento di navigazione O nav-link invece di quelli lunghi come interfaccia di navigazione O collegamento-di-navigazione-principale.

.nav-item {
/* Stili per le voci del menu di navigazione */
}
.nav-link {
/* Stili per i link di navigazione */
}

Utilizzo di acronimi o abbreviazioni popolari nel contesto del progetto, come ad esempio nav per navigazione, potrebbe rendere il codice molto più semplice da comprendere per altri programmatori.

Best practice per la denominazione di classi e ID CSS

In un progetto JavaScript, è fondamentale assegnare un nome appropriato alle classi e agli ID CSS per la leggibilità, la manutenzione e la scalabilità del codice.

Puoi semplificare i fogli di stile e migliorare la qualità del codice. Trovare il tempo per stabilire buone convenzioni di denominazione ripagherà a lungo termine rendendo più facile per te e per gli altri comprendere e mantenere la base di codice.