Che cos'è BEM (Block, Element, Modifier) ​​e come può essere utilizzato con Drupal Emulsify Twig

Quando si lavora con tecnologie e software open source, è ancora più importante semplificare lo sforzo necessario per leggere e comprendere il codice. Una buona convenzione di denominazione ti aiuta a risolvere problemi più grandi piuttosto che concentrarti sulla sintassi e sulle preferenze di stile durante le revisioni del codice. Gli sviluppatori esperti comprendono il significato di codice ben scritto e organizzato quando lavorano con siti Web più grandi con tonnellate di elementi di stile.

La metodologia BEM (Block, Element, Modifier) ​​è una convenzione di denominazione ampiamente utilizzata per le classi CSS che sta guadagnando popolarità grazie alla facilità d'uso che offre. Il concetto fondamentale di BEM è lo sviluppo web basato su componenti. BEM rende lo sviluppo dell'interfaccia facile e veloce, soprattutto quando gestisci progetti di grandi dimensioni con un'interfaccia utente complessa. Esploriamo di più su BEM e su come può funzionare con il modulo Drupal Emulsify Twig.

Cos'è BEM

La metodologia BEM è stata introdotta per facilitare l'accesso, la comprensione e la scalabilità delle classi CSS. Può accelerare il processo di sviluppo e aiuta a costruire componenti riutilizzabili.

BEM comprende tre parti:

1. Bloccare
2. Elemento
3. Modificatore

Bloccare

I blocchi sono il componente più esterno e funzionalmente indipendente e sono riutilizzabili. Esempi: intestazione, piè di pagina, barra laterale, menu, contenuto, ecc.

Caratteristiche:

• I nomi dei blocchi dovrebbero sempre riflettere lo scopo del blocco.
• I blocchi non devono utilizzare margine o posizione. Se è necessario aggiungere margine o posizione, è necessario applicarlo ai contenitori interni.
• Non utilizzare tag CSS o selettori ID quando si utilizza BEM.

Esempio:

 <div class=”icon-button”></div>

Elemento

Gli elementi sono elementi figlio di un blocco. Ogni elemento può avere un solo blocco e non può essere utilizzato al di fuori di esso. Esempi: voci di menu, voci di elenco, campo di immissione, ecc.

Caratteristiche:

• Il nome dell'elemento (classe) dovrebbe descrivere il suo scopo (titolo, didascalia) e non il suo stato (piccolo/rosso).
• L'elemento e il blocco sono separati da un doppio trattino basso (__). In questo modo: nome-blocco__nome-elemento.

Esempio:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

Modificatore

Un nome di classe attraverso il quale è possibile definire l'aspetto, lo stato o il comportamento di un blocco o di un elemento. Esempi: rosso, grande, disabilitato, fisso, ecc.

Caratteristiche:

• Il nome del modificatore ne descrive l'aspetto. Ad esempio, se l'aspetto è "_large", la classe del modificatore sarà come icon-button__title_large .
• Il modificatore è separato dal blocco o dall'elemento da un singolo trattino basso (_).

Esempio:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

Tipi di modificatori

1. Booleano

È possibile verificare la condizione del valore booleano e impostarlo in una variabile. Questa variabile può passare come valore modificatore.

2. Valore-chiave

La struttura del nome completo del modificatore con valore-chiave seguirà uno di questi schemi:

1. block-name_modifier-name_modifier-value
2. nome-blocco__nome-elemento_nome-modificatore_valore-modificatore

Convenzioni di denominazione: regole e schemi

Esistono diversi schemi di denominazione. Tutti gli schemi hanno alcune regole comuni come:

• I nomi sono scritti in lettere latine minuscole.
• Le parole sono separate da un trattino (-).

1. Schemi di denominazione classici

Lo schema di denominazione classico è lo schema di denominazione predefinito di BEM.

Block-name__elem-name_mod-name_mod-val

• Il nome dell'elemento e il nome del blocco sono separati da un doppio trattino basso (__).
• Il nome del modificatore e il nome del blocco o dell'elemento sono separati da un singolo trattino basso (_).
• Il valore del modificatore e il nome del modificatore sono separati da un singolo carattere di sottolineatura (_).

2. Stile di denominazione a due trattini

block-name__elem-name--mod-name--mod-val

• L'elemento e il nome del blocco sono separati da un doppio trattino basso (__).
• Il blocco e l'elemento sono separati da un doppio trattino (--).
• Il valore di un modificatore e di un modificatore sono separati da un doppio trattino (--).

3. Stile di denominazione CamelCase

blockName-elemName_modName_modVal

• Ogni parola dopo la prima inizia con una lettera maiuscola.
• Blocchi, elementi e modificatori vengono utilizzati allo stesso modo dello schema di denominazione standard.

4. Stile di denominazione di reazione

BlockName-ElemName_modName_modVal

• Il nome del blocco e i nomi degli elementi iniziano con una lettera maiuscola.
• Il nome del modificatore inizia con una lettera minuscola.
• Il nome di un elemento e il nome di un blocco sono separati da un singolo trattino (-).
• I nomi e i valori dei modificatori sono separati allo stesso modo dello schema standard.

BEM in Drupal con modulo Emulsify Twig

In Drupal, possiamo usare la funzione BEM Twig con l'aiuto del modulo Emulsify Twig. La funzione BEM consente di creare classi BEM sugli elementi nei componenti. Di seguito sono menzionate alcune estensioni BEM Twig e il loro utilizzo.

1. Nome del blocco semplice (argomento obbligatorio):

<div {{ bem('icon') }}>

Questo crea:

<div class="icona">

2. Blocco con modificatori:

Se vuoi aggiungere più modificatori, puoi farlo usando un array.

<div {{ bem('icon', ['small', 'red']) }}>

Questo crea:

<div class="icon icon-–small icon-–red">

3. Elemento con modificatori e blockname (opzionale):

<div {{ bem('icon', ['small', 'red'], 'icon-button') }}>

Questo crea:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red">

4. Elemento con blockname, ma senza modificatori (opzionale):

<div {{ bem('icon', '', 'icon-button') }}>

Questo crea:

<div class="icon-button__icon">

5. Elemento con blockname, modificatori e classi extra:

<div {{ bem('icon', ['small', 'red'], 'icon-button', ['js-click', 'something-else']) }}>

Questo crea:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-click Something-else">

6. Solo elemento con classi extra (opzionale):

<div {{ bem('icon', '', '', ['js-click']) }}>

Questo crea:

<div class="icon js-click">

Aggiungi estensione ramoscello attributi

La funzione Aggiungi attributi Twig ti consente di aggiungere attributi HTML agli elementi dei tuoi componenti. Dai un'occhiata ad alcune funzioni Aggiungi attributi di seguito:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

Pensieri finali

La metodologia BEM è estremamente utile per gli sviluppatori che desiderano scrivere e mantenere un codice di qualità migliore che possa essere facilmente consegnato e compreso. Ogni elemento ha uno scopo facilmente identificabile dal suo nome e da quale blocco proviene. Se usato correttamente, vedrai che l'uso di BEM può aumentare la velocità di sviluppo. Se ti è piaciuto quello che hai letto, iscriviti alla nostra newsletter settimanale dove ti invieremo informazioni fresche e bollenti direttamente nella tua casella di posta!