Convenzioni di denominazione CSS che ti faranno risparmiare ore di debug

Ho sentito molti sviluppatori dire che odiano i CSS. Nella mia esperienza, ciò deriva dal non perdere tempo per imparare i CSS.

Coreano?

알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 번역 되었으며, 한국어 버전 은 여기 에서 보실 수 있습니다

Il CSS non è il "linguaggio" più grazioso, ma ha alimentato con successo lo stile del web da oltre 20 anni. Non fare troppo male, eh?

Tuttavia, mentre scrivi più CSS, vedi rapidamente un grande svantaggio.

È davvero difficile mantenere i CSS.

I CSS scritti male si trasformeranno rapidamente in un incubo.

Ecco alcune convenzioni di denominazione che ti risparmieranno un po 'di stress e innumerevoli ore lungo la linea.

ci sei già stato, vero?

Usa le stringhe delimitate da trattino

Se scrivi molto JavaScript, la scrittura di variabili nel caso del cammello è pratica comune.

var redBox = document.getElementById ('...')

Ottimo vero?

Il problema è che questa forma di denominazione non è adatta al CSS.

Non farlo:

.scatola rossa {
  bordo: 1px rosso fisso;
}

Invece, fai questo:

.scatola rossa {
   bordo: 1px rosso fisso;
}

Questa è una convenzione di denominazione CSS piuttosto standard. È probabilmente più leggibile.

Inoltre, è coerente con i nomi delle proprietà CSS.

// Corretta
.some-class {
   peso carattere: 10em
}
// Sbagliato
.some-class {
   fontWeight: 10em
}

La convenzione di denominazione BEM

I team hanno approcci diversi alla scrittura di selettori CSS. Alcuni team usano delimitatori di trattini, mentre altri preferiscono utilizzare la convenzione di denominazione più strutturata chiamata BEM.

In generale, ci sono 3 problemi che le convenzioni di denominazione CSS cercano di risolvere:

  1. Per sapere cosa fa un selettore, basta guardare il suo nome
  2. Per avere un'idea di dove può essere utilizzato un selettore, semplicemente guardandolo
  3. Conoscere le relazioni tra i nomi delle classi, semplicemente guardandole

Hai mai visto nomi di classi scritti così:

.nav - secondario {
  ...
}
.nav__header {
  ...
}

Questa è la convenzione di denominazione BEM.

Spiegare BEM a un bambino di 5 anni

BEM tenta di dividere l'interfaccia utente complessiva in piccoli componenti riutilizzabili.

Considera l'immagine qui sotto:

È un'immagine premiata di un uomo-bastone :)

No, non è premiato :(

Lo stick-man rappresenta un componente, come un blocco di design.

Potresti aver già indovinato che la B in BEM sta per "Blocco".

Nel mondo reale, questo "blocco" potrebbe rappresentare una navigazione del sito, un'intestazione, un piè di pagina o qualsiasi altro blocco del design.

Seguendo la pratica spiegata sopra, un nome di classe ideale per questo componente sarebbe stick-man.

Il componente dovrebbe essere in questo modo:

.stick-man {
  
 }

Abbiamo usato stringhe delimitate qui. Buono!

E per Elements

La E in "BEM" sta per Elements.

I blocchi di progettazione complessivi raramente vivono isolati.

Ad esempio, l'uomo-bastone ha una testa, due splendide braccia e piedi.

La testa, i piedi e le braccia sono tutti elementi all'interno del componente. Possono essere visti come componenti figlio, ovvero figli del componente genitore generale.

Utilizzando la convenzione di denominazione BEM, i nomi delle classi di elementi vengono derivati ​​aggiungendo due caratteri di sottolineatura, seguiti dal nome dell'elemento.

Per esempio:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M per modificatori

La M in "BEM" sta per modificatori.

Cosa succederebbe se lo stickman fosse modificato e potessimo avere un stickman blu o rosso?

Nel mondo reale, questo potrebbe essere un pulsante rosso o un pulsante blu. Queste sono le modifiche del componente in questione.

Utilizzando BEM, i nomi delle classi modificatori vengono derivati ​​aggiungendo due trattini seguiti dal nome dell'elemento.

Per esempio:

.stick-man - blue {
}
.stick-man - rosso {
}

L'ultimo esempio mostrava il componente genitore che veniva modificato. Questo non è sempre il caso.

E se avessimo stick-men di diverse dimensioni della testa?

Questa volta l'elemento è stato modificato. Ricorda, l'elemento è un componente figlio all'interno del blocco contenitore generale.

.Stick-man rappresenta il blocco, .stick-man__head l'elemento.

Come visto nell'esempio sopra, i doppi trattini possono anche essere usati in questo modo:

.stick-man__head - piccolo {
}
.stick-man__head - big {
}

Ancora una volta, nota l'uso dei doppi trattini nell'esempio sopra. Questo è usato per indicare un modificatore.

Ora ce l'hai.

È sostanzialmente così che funziona la convenzione di denominazione BEM.

Personalmente, tendo a usare solo i nomi di classe delimitatore di trattino per progetti semplici e BEM per interfacce utente più coinvolte.

Puoi leggere di più su BEM.

Perché usare le convenzioni di denominazione?

In Informatica ci sono solo due problemi: l'invalidazione della cache e la denominazione delle cose: Phil Karlton

Nominare le cose è difficile. Stiamo cercando di semplificare le cose e di risparmiare tempo in futuro con un codice più gestibile.

La denominazione corretta delle cose nei CSS renderà il tuo codice più facile da leggere e mantenere.

Se si sceglie di utilizzare la convenzione di denominazione BEM, sarà più semplice visualizzare la relazione tra i componenti / i blocchi di progettazione semplicemente osservando il markup.

Ti senti sicuro?

Nomi CSS con ganci JavaScript

Oggi è il primo giorno di lavoro di John.

Gli viene consegnato un codice HTML simile al seguente:

John ha letto questo articolo e si rende conto che potrebbe non essere il modo migliore per nominare le cose nei CSS. Quindi va avanti e riformatta la base di codice in questo modo:

Sembra buono, eh?

Sconosciuto a John, aveva rotto la base di codice

Come?

Da qualche parte nel codice JavaScript, c'era una relazione con il nome della classe precedente, siteNavigation:

// il codice Javasript
const nav = document.querySelector ('. siteNavigation')

Quindi, con la modifica del nome della classe, la variabile nav è diventata nulla.

Che triste.

Per prevenire casi come questo, gli sviluppatori hanno messo a punto strategie diverse.

1. Utilizzare i nomi di classe js

Un modo per mitigare tali bug è usare un nome di classe js- * per indicare una relazione con l'elemento DOM in questione.

Per esempio:

E nel codice JavaScript:

// il codice Javasript
const nav = document.querySelector ('. js-site-navigation')

Come convenzione, chiunque veda il nome della classe js-site-navigation capirà che esiste una relazione con quell'elemento DOM nel codice JavaScript.

2. Utilizzare l'attributo Rel

Non uso questa tecnica da solo, ma ho visto fare la gente.

Lo riconosci?

Fondamentalmente, l'attributo rel definisce la relazione che la risorsa collegata ha con il documento a cui fa riferimento.

Nell'esempio precedente con John, i sostenitori di questa tecnica farebbero questo:

E nel JavaScript:

const nav = document.querySelector ("[rel = 'js-site-navigation']")

Ho i miei dubbi su questa tecnica, ma è probabile che ci si imbatta in alcune basi di codice. L'affermazione qui è, "beh, c'è una relazione con Javascript, quindi uso l'attributo rel per denotarlo".

Il web è un posto grande con molti "metodi" diversi per risolvere lo stesso problema.

3. Non utilizzare gli attributi dei dati

Alcuni sviluppatori utilizzano gli attributi di dati come hook JavaScript. Questo non è giusto Per definizione, gli attributi dei dati vengono utilizzati per archiviare dati personalizzati.

Buon uso degli attributi dei dati. Come visto su Twitter

Modifica n. 1: come menzionato da alcune persone straordinarie nella sezione dei commenti, se le persone usano l'attributo "rel", allora forse va bene usare gli attributi dei dati in determinati casi. Dopotutto è la tua chiamata.

Suggerimento bonus: scrivi altri commenti CSS

Questo non ha nulla a che fare con le convenzioni di denominazione, ma ti farà risparmiare anche un po 'di tempo.

Mentre molti sviluppatori web cercano di NON scrivere commenti JavaScript o attenersi ad alcuni, penso che dovresti scrivere più commenti CSS.

Poiché il CSS non è il "linguaggio" più elegante, i commenti ben strutturati possono farti risparmiare tempo quando cerchi di capire il tuo codice.

Non fa male.

Dai un'occhiata a quanto è ben commentato il codice sorgente di Bootstrap.

Non è necessario scrivere commenti per dire colore: il rosso darà un colore rosso. Ma, se stai usando un trucco CSS meno ovvio, sentiti libero di scrivere un commento.

Pronto a diventare professionista?

Ho creato una guida CSS gratuita per far brillare le tue abilità CSS, immediatamente. Ottieni l'ebook gratuito.

Sette segreti CSS che non conoscevi