Una rapida introduzione a Block Element Modifier (BEM)

Modificatore di elementi a blocchi

Ciao! Quindi vuoi ottenere una migliore comprensione del BEM? Immagino che se stai leggendo questo, potresti non sapere cosa rappresenta BEM. In caso contrario, è un'abbreviazione di Block Element e Modifier.

Che cos'è il BEM?

BEM è una metodologia di progettazione che consente di creare componenti riutilizzabili e condivisione del codice nello sviluppo front-end. - getbem.com

Ciò significa che BEM è un sistema di metodi che ti aiuta a scrivere il tuo codice HTML e CSS in modo che sia semplice riutilizzare e condividere con altre parti del codice.

BEM in azione.

Quindi ora conosci la definizione di BEM, ma potresti non sapere come appare o come funziona. Come ho detto prima, BEM è un'abbreviazione, quindi diamo un'occhiata a ciascuna di quelle parole e al loro significato.

Bloccare

Un "blocco" si riferisce a qualsiasi entità che può stare da sola e avere ancora senso. Esempi di blocchi sono intestazione, input e casella di controllo. Esempi di cose che non sono blocchi sono i titoli delle intestazioni, un elemento in un elenco o un'etichetta per una casella di controllo.

Se dovessimo rimuovere il testo che identifica un ingresso radio e metterlo da solo, non avrebbe più senso.

Guarda questo:

Se la parte delineata viene separata in singoli blocchi, non avrebbero più senso per l'utente.

Questa è una vera separazione in blocchi:

Se ho rimosso uno di questi blocchi e l'ho buttato via, l'altro blocco avrebbe comunque un senso per l'utente. Tuttavia, in questo caso, non sarà utile per l'utente perché è un pulsante di opzione anziché una casella di controllo.

È importante considerare un blocco come una combinazione (o un singolo tag HTML) di più elementi (o altri blocchi) in un modo che abbia senso per l'utente quando viene posizionato da solo.

Elementi

Un elemento dovrebbe essere un po 'più facile da capire ora da quando l'ho spiegato quando ho parlato di Blocks. Quelle parti di un blocco che non hanno significato semantico al di fuori del blocco sono elementi.

Diamo un'occhiata di nuovo a questo:

Le parti evidenziate sono elementi perché aiutano a definire quale sia il blocco.

Il codice per la schermata qui sopra sarebbe simile a questo:

Abbiamo tre elementi che compongono il blocco opzioni: option__text, option__radio-button, option__note. Eppure potremmo cambiare uno di questi elementi in un blocco a parte:

L'elemento option__note ora è una nota a blocchi. Ciò significa che potremmo trovare note al di fuori del blocco opzioni in un modo che sia utile per l'utente.

Modificatore

Un modificatore è un flag che cambia l'aspetto o il comportamento di un blocco o di un elemento. Per esempio:

I due pulsanti sono lo stesso blocco, ma sembrano diversi. La potenza che BEM ci offre ci consente di utilizzare lo stesso blocco due volte e di farli apparire molto diversi.

Vediamo come appare il codice per quello:

Per impostazione predefinita, il pulsante è bianco con un testo blu. Per ottenere una variazione, aggiungiamo un pulsante: la bandiera verde, che quindi rende il pulsante verde con un testo bianco.

Secondo le regole BEM, il nostro pulsante bandiera - il verde sta avendo un "effetto collaterale" che potrebbe creare confusione, che è la proprietà box-shadow. La nostra bandiera fa qualcosa che il suo nome non ci dice. Ma va bene, perché, nel nostro piccolo progetto, non avremo mai un pulsante verde con un'ombra a forma di scatola. Se mai lo facciamo, possiamo spezzare la bandiera:

Ora, quando abbiamo bisogno di un pulsante verde con un'ombra a forma di scatola, aggiungeremo solo il pulsante - bandiera verde. Lo stesso vale per la proprietà color.

Conclusione

BEM è un modo molto carino per scrivere e strutturare il tuo codice HTML e CSS. Questa guida non copre il 100% di tutto il BEM, ma dovrebbe essere sufficiente per darti una solida conoscenza della metodologia. Puoi leggere di più su BEM qui.

Spero che tu abbia imparato qualcosa da questo e che tu abbia una migliore comprensione del BEM e di come appare nel mondo reale. Se lo fai, non esitare a lasciare un commento e qualche applauso.

Hai delle domande? Puoi inviarmi un DM su Twitter @THEozmic.