Articolo originale: CSS Naming Conventions that Will Save You Hours of Debugging
Ho sentito molti sviluppatori dire che odiano il CSS. Nella mia esperienza, questo capita come diretta conseguenza del non prendersi abbastanza tempo per impararlo.
Il CSS non è il "linguaggio" più carino, ma ha dato vita allo stile del web per più di vent'anni. Non sta andando poi così male, no?
Però, più scrivi CSS e più ti accorgi di un grosso difetto.
È dannatamente difficile da manutenere.
Il CSS scritto male diventa velocemente un incubo.
Ecco alcune convenzioni di nomenclatura che ti risparmieranno un po' di stress e innumerevoli ore di lavoro.
Usa stringhe delimitate da trattini
Se scrivi un sacco di JavaScript, scrivere le variabili in camel case è una pratica comune.
var redBox = document.getElementById('...')Il problema è che questo tipo di nomenclatura non è adatta al CSS.
Non fare questo:
.redBox {
border: 1px solid red;
}Invece, scrivi:
.red-box {
border: 1px solid red;
}Questa è una nomenclatura piuttosto standard in CSS ed è senza dubbio più leggibile.
È anche coerente con i nomi delle proprietà in CSS.
/* Corretto */
.some-class {
font-weight: 10em;
}
/* Sbagliato */
.some-class {
fontWeight: 10em;
}La nomenclatura BEM
Diversi team hanno diversi approcci per la denominazione dei selettori CSS. Alcuni team usano i trattini, mentre altri preferiscono usare una nomenclatura più strutturata chiamata BEM.
In genere, ci sono tre problemi che le convenzioni di nomenclatura CSS provano a risolvere:
- Sapere cosa fa un selettore
- Avere un'idea di dove può essere usato un selettore
- Sapere la relazione tra i nomi delle classi
Tutto ciò dovrebbe essere chiaro dando una semplice occhiata al nome del selettore.
Hai mai visto nomi di classi scritti così?
.nav--secondary { }
.nav__header { }Questa è la nomenclatura BEM.
Spiegare la nomenclatura BEM a un bambino di cinque anni
La nomenclatura BEM prova a dividere l'interfaccia utente in piccoli componenti riutilizzabili.
Considera l'immagine seguente:
No, non è degno di riconoscimenti :(
L'omino rappresenta un componente, come un blocco di design.
Potresti avere già indovinato che la B in BEM sta per 'Blocco'.
Nel mondo reale, questo 'blocco' potrebbe rappresentare una barra di navigazione, un'intestazione, un pie' di pagina e altri blocchi di design.
Seguendo la pratica spiegata sopra, un nome ideale per la classe per questo componente sarebbe stick-man.
Lo stile del componente dovrebbe essere impostato in questo modo:
.stick-man { }Abbiamo usato le stringhe delimitate da trattini. Ottimo!
E per elementi
La E in 'BEM' sta per Elementi.
I blocchi di design generali raramente sono isolati.
Per esempio, l'omino a bastoncini ha una testa head, due bellissime braccia arms, e dei piedi feet.
head, feet e arms sono tutti elementi dentro il componente. Posso essere visti come componenti figli, cioè figli del componente genitore generale.
Usando la nomenclatura BEM, i nomi delle classi degli elementi sono derivati aggiungendo due trattini bassi, seguiti dal nome dell'elemento.
Per esempio:
.stick-man__head { }
.stick-man__arms { }
.stick-man__feet { }M per modificatori
La lettera M in 'BEM' sta per Modificatori.
E se l'omino a bastoncini fosse modificato e potessimo avere un omino blu (blue) o un omino rosso (red)?
Nel mondo reale, questo potrebbe essere un pulsante blu o un pulsante rosso. Queste sono modifiche del componente in questione.
Usando la nomenclatura BEM, i nomi delle classi modificate sono derivati aggiungendo due trattini seguiti dal nome dell'elemento.
Per esempio:
.stick-man--blue { }
.stick-man--red { }
L'ultimo esempio mostra il componente genitore che viene modificato. Ma non è sempre così.
Potremmo avere degli omini con diverse dimensioni della testa.
Questa volta è l'elemento che è stato modificato. Ricorda, l'elemento è un componente figlio dentro un blocco contenitore generale.
Quindi, .stick-man rappresenta il blocco, .stick-man__head l'elemento.
Come hai visto nell'esempio sopra, i due trattini possono essere usati in questo modo:
.stick-man__head--small { }
.stick-man__head--big { }Nota l'uso dei due trattini nell'esempio qui sopra. Sono usati per denotare un modificatore.
Abbiamo visto come funziona la nomenclatura BEM.
Personalmente, tendo a usare i nomi di classi con i trattini per progetti semplici, e la nomenclatura BEM per interfacce utente più complesse.
Qui puoi leggere di più sulla nomenclatura BEM.
Perché usare nomenclature specifiche?
Ci sono solo due problemi difficili in informatica: invalidare la cache e dare i nomi alle cose – Phil Karlton
Dare il nome alle cose è difficile. Stiamo provando a rendere le cose più semplici e risparmiare del tempo in futuro con del codice su cui è più facile fare manutenzione.
Dare il nome corretto alle cose in CSS renderà il tuo codice più facile da leggere e da gestire.
Se scegli di usare la nomenclatura BEM, diventerà più semplice capire la relazione tra i componenti/blocchi del design solo guardando il markup.
Nomi CSS con gli Hook JavaScript
Oggi è il primo giorno di lavoro di John.
Gli viene dato del codice HTML come questo:
<div class="siteNavigation">
</div>John ha letto questo articolo e ha realizzato che questo potrebbe non essere il modo migliore per dare il nome alle cose in CSS. Quindi fa il refactoring in questo modo:
<div class="site-navigation">
</div>Meglio, mh?
Senza saperlo, John ha rotto il codebase...
Come?
Da qualche parte nel codice JavaScript, c'era una relazione con la classe precedente, siteNavigation:
// the JavaScript code
const nav = document.querySelector('.siteNavigation')Quindi, con questo cambiamento al nome della classe, la variabile nav diventa null.
Che cosa triste.
Per evitare casi come questo, gli sviluppatori hanno studiato diverse strategie.
1. Usare classi che iniziano con js-
Un modo per ridurre questi bug è usare nomi di classi che iniziano con js-* per denotare una relazione con l'elemento del DOM in questione.
Ad esempio:
<div class="site-navigation js-site-navigation">
</div>E nel codice JavaScript
// the JavaScript code
const nav = document.querySelector(".js-site-navigation")Come convenzione, chiunque vede il nome di classe js-site-navigation capisce che c'è una relazione con l'elemento del DOM nel codice JavaScript.
2. Usare l'attributo Rel
Non uso questa tecnica personalmente, ma ho visto persone che lo fanno.
Lo riconosci?
<link rel="stylesheet" type="text/css" href="main.css">In pratica, l'attributo rel definisce la relazione che una risorsa linkata ha con il documento che vi fa riferimento.
Nell'esempio precedente con John, i sostenitori di questa tecnica farebbero così:
<div class='site-navigation' rel='js-site-navigation'>
</div>E nel JavaScript:
const nav = document.querySelector("[rel='js-site-navigation']")Ho i miei dubbi su questa tecnica, ma ti potrebbe capitare di vederla in alcuni codebase. La dichiarazione qui è, "c'è una relazione con il JavaScript, quindi uso l'attributo rel per denotarlo".
Il web è un grande posto con tanti diversi "metodi" per risolvere gli stessi problemi.
3. Non usare attributi data
Alcuni sviluppatori usano gli attributi data come hook JavaScript. Questo non è corretto. Per definizione, gli attributi data sono usati per immagazzinare dati personalizzati.
Modifica #1: come menzionato da certe fantastiche persone nella sezione commenti, se le persone usano l'attributo 'rel', allora forse è ok usare gli attributi data in certi casi. Sta a te decidere dopo tutto.
Consiglio extra: scrivi più commenti CSS
Questo non ha nulla a che vedere con le convezioni di nomenclatura, ma ti salverà un sacco di tempo.
Mentre un sacco di sviluppatori web consigliano di non scrivere commenti JavaScript, o scriverne pochi, credo che dovresti scrivere più commenti CSS.
Visto che il CSS non è il linguaggio più elegante, commenti ben strutturati possono salvare tempo quando stai provando a capire il tuo codice.
Di certo male non fa.
Guarda quanto è ben commentato il codice sorgente di Bootstrap!
Non devi scrivere commenti per dire che color: red rende qualcosa rosso. Ma se stai usando trucchetti CSS meno ovvi, sentiti libero di scrivere un commento.