CONTATTACI

Blog

Metodologia BEM: scrivere CSS in maniera scalabile e mantenibile

Ti è mai capitato di assegnare alle classi CSS dei nomi casuali che non rispettano una determinata gerarchia e non descrivono quello che devono fare?

Tranquillo, la risposta è scontata… Soprattutto quando si è alle prime armi è abbastanza complicato scrivere codice mantenibile e scalabile, in quanto queste abilità (skills) si sviluppano con tanta pratica e attenzione non soltanto nello scrivere codice funzionante, ma anche ben strutturato e comprensibile.

Per risolvere questo piccolo intoppo, possiamo utilizzare la convenzione BEM.

Quest’ultima ti permetterà di scrivere classi CSS comprensibili sia per te, che per tutti gli sviluppatori che dovranno leggere il tuo codice.

La più grande peculiarità di BEM è quella di poter scrivere codice modulare, riutilizzabile in molteplici punti del codice e in più progetti.

Ti mostreremo nel dettaglio come utilizzare la convenzione BEM.

Per nominare le classi CSS utilizziamo la seguente sintassi: 

 

/Users/nicoladivenere/Desktop/Schermata 2021-06-01 alle 14.32.15.png

Con block indichiamo un modulo della nostra pagina, come ad esempio: l’intestazione (header).

Element invece rappresenta l’elemento all’interno del nostro blocco (modulo), come ad esempio il logo.

Modifier è quella specifica classe che modifica il blocco o l’elemento.

../Schermata%202021-06-01%20alle%2014.55.44.png

Analizzando il seguente codice HTML puoi intuire in maniera istantanea che abbiamo un blocco header con all’interno un logo ed un blocco nav. Quest’ ultimo è caratterizzato da una lista che a sua volta contiene degli items (li).

In questa maniera diventa facilissimo comprendere lo scopo di una determinata classe e soprattutto la correlazione gerarchica tra le varie classi e i vari elementi.

Dopo aver approfondito i concetti di blocco (block) ed elemento (element), ci soffermiamo su quello di modificatore (modifier). Il modifier è una classe che si applica ad un elemento, con lo scopo di modificare una o più proprietà dello stesso.

 

../Schermata%202021-06-01%20alle%2016.06.30.png

In questo specifico caso immaginiamo di voler aggiungere dello stile nel momento in cui uno specifico link sia stato già visualizzato. Per fare questo utilizziamo appunto il modifier rispettando la sintassi sopra riportata (–modifier).

Sviluppiamo le classi CSS: 

../Schermata%202021-06-01%20alle%2017.09.39.png

Visualizziamo il risultato sul browser:

../Schermata%202021-06-01%20alle%2017.08.13.png

Utilizzare la convenzione BEM in modo corretto ti agevolerà in maniera considerevole nella scrittura del codice e soprattutto ti farà risparmiare molto tempo successivamente quando dovrai revisionarlo o completarlo.

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.