Share
Ammettiamolo, tutti noi vogliamo rendere il nostro codice più facile da leggere. Questo ci aiuta a lavorare in modo più rapido ed efficiente, e quando gli altri lavorano con noi possiamo mantenere chiarezza e semantica coerente. In questi giorni sembrano esserci molti standard e termini nel mondo CSS: OOCSS, SMACSS, BEM e altro! Questi sono tutti gli approcci per migliorare la struttura dei CSS e oggi parleremo di BEM.
BEM sta per Block Element Modifier. Suggerisce un modo strutturato di denominare le classi, in base alle proprietà dell'elemento in questione. Se hai mai visto un nome di classe come header__form-mail questo è BEM in azione. Quando si utilizza la metodologia BEM, tenere presente che verranno utilizzati solo nomi di classi (non ID). I nomi di classe ti consentono di ripetere il nome BEM se necessario e di creare una struttura di codifica più coerente (sia nei file HTML che CSS / Sass). Ora analizziamolo.
Il bloccare è il contenitore o il contesto in cui si trova l'elemento. Pensa a questo come ai pezzi strutturali più grandi del tuo codice. Potresti avere un'intestazione, un piè di pagina, una barra laterale e un'area di contenuto principale; ognuno dei quali sarebbe considerato un blocco. Dai un'occhiata all'immagine qui sotto:
L'elemento block costituisce la radice della classe e andrà sempre per primo. Sappi solo che una volta definito il blocco, sarai pronto per iniziare a nominare i tuoi elementi.
L'elemento è il pezzo di un blocco. Il blocco è il tutto e gli elementi sono i pezzi. Ogni elemento viene scritto dopo il blocco collegato da due trattini bassi.
.block__element
So che questo sembra un po 'strano, ma una volta che inizi a usarlo ti chiedi come mai hai scritto CSS senza di esso! La doppia sottolineatura consente di navigare e manipolare il codice in modo rapido e visivo.
Ecco alcuni esempi di come funziona la metodologia dell'elemento:
.header__logo .header__tagline .header__searchbar .header__navigation
Come puoi vedere, c'è spazio per la creatività e la tua metodologia. "Navigazione" potrebbe essere cambiato in "nav", "tagline" potrebbe essere cambiato in "tag" o "tagLine". Il punto è mantenere i nomi semplici, chiari e precisi. Non pensarci troppo, e perché i fogli di stile e l'html rimarranno DRY (non ripeterti). Non dovrebbe essere un problema aggiornare i nomi delle classi quando trovi una semantica migliore che funziona per te (prova solo ad aderire!). Gli elementi faranno il nucleo dei nomi delle classi, aiutandoti a capire come strutturare i tuoi fogli di stile e come gestire il tuo layout.
Ora diventa divertente (se non ti stessi divertendo già!) Quando si nomina una classe, l'intenzione è quella di contribuire a rendere ripetibile quell'elemento in modo da non dover scrivere nuove classi in altre aree del sito se gli stili degli elementi sono uguali Quando hai bisogno di modificare lo stile di un elemento specifico, puoi usare un modificatore (ovviamente!) Per fare ciò, aggiungi un doppio trattino -- dopo l'elemento (o blocco). Ecco un breve esempio
.modificatore di blocco .block__element - modificatore
Stai attento con questi! Ricorda che vuoi mantenere tutto semplice e non dover ripetere te stesso o creare classi extra a meno che non sia assolutamente necessario. Parliamone con il codice usando l'intestazione del sito come nostro blocco:
.header__navigation .header__navigation - secondary
Se si utilizza una navigazione secondaria, è probabile che il layout e la spaziatura siano gli stessi, ma la navigazione secondaria è di un colore diverso. È possibile duplicare gli stili originali o, ancora meglio, utilizzare un preprocessore. Con Sass, lo faresti @estendere l'elemento principale (in modo che l'elemento secondario erediti tutte le proprietà) e cambi gli stili appropriati.
.header__navigation background: # 008cba; imbottitura: 1rem 0; margine: 2rem 0; text-transform: maiuscolo; .header__navigation - secondary @extend .header__navigation; sfondo: # dfe0e0;
Potresti pensare a te stesso "ma il nome della classe è così lungo!" Il modo in cui lo vedo: i nomi delle classi BEM sono specifici, chiari, facili da leggere all'interno di html e comunicano chiaramente a cosa servono.
Quello che mi piace anche dei nomi di classe BEM è che devi solo usare un nome di classe per ogni tag html. Dai un'occhiata a come potrebbe funzionare per le etichette. Selettori standard:
.label .label-default .label .label-alert
vs. selettori BEM:
.label .label - alert
Lingue come Sass (Scss specificatamente) ci permettono di avere rapidamente elementi che condividono gli stessi stili con piccole eccezioni. L'esempio seguente ci impedisce di duplicare gli stili, piuttosto cambiamo solo ciò che è necessario. Quello che mi piace di più della metodologia BEM è che non devo combinare classi ambigue come "pannello di controllo-predefinito col-md-3”. Se usi un framework come Foundation puoi iniziare a sfruttare i mix. Ma per un semplice esempio, modelliamo quelle etichette che abbiamo appena definito.
.etichetta background: #eee; border-radius: 505; colore: # 333; font-size: 1rem; .label - alert @extend .label; sfondo: # da4531; colore: #fff;
Bene, ce l'hai, BEM in poche parole. Come puoi vedere, c'è molto altro da esplorare. BEM è un sistema in continua evoluzione che ti consente di rendere più chiaro il tuo codice e aiutarti a definire e impostare meglio la gerarchia nello sviluppo front-end.
Dalla mia esperienza personale, mi ha aiutato moltissimo nella costruzione di prototipi in modo più efficiente, e il passaggio al codice del livello di produzione ancora più veloce!
Quali sono i tuoi pensieri su BEM, hai qualche consiglio, consigli o trucchi per i tuoi colleghi Tuts + lettori? Fateci sapere nei commenti qui sotto!
Accentsconagua