Il workshop di Marco Zampetti (UX Designer, Frontend Developer, Junior PM @ Cantiere Creativo) a Creativity Day 2016, tappa di Reggio Emilia

1. LA METODOLOGIA BEM, SCRIVERE UN
CODICE MIGLIORE PER IL PRESENTE
ED IL FUTURO
Marco Zampetti
frontend developer
Cantiere Creativo

2. Obiettivo
Introdurvi alla metodologia BEM, per farvi provare con
mano i suoi vantaggi e permettervi di cominciare ad usarlo
da subito.
• prima parte: tante slide sul BEM —> domande
• seconda parte: si scrive il BEM —> ancora più domande

3. Workshop sul CSS?!
• Scrivere CSS è facile!
• Scrivere CSS che sia mantenibile e scalabile,
sviluppandolo in team, e che permetta di tornare a
lavorarci sopra dopo qualche mese senza
impazzire… è facile?

4. Problemi
• Non è semplice scrivere codice in team
• Assenza di regole comuni
• Continuare il lavoro degli altri, o rifarlo da capo?
• Scontro tra i nomi
• Riutilizzo

5. BEM
BEM è una metodologia di nomenclatura che:
1. facilita il riutilizzo del codice, senza rischiare le collisioni
tra le classi
2. rende chiaro il codice e le intenzioni di chi lo ha scritto
3. è più facile da scrivere, e da modificare in futuro

6. BEM: dare un nome
Dare un nome significa dare un significato, un idea.
Per questo dare un nome alle cose è uno dei due aspetti
difficili nel mondo della programmazione.
Trovare il nome giusto non è immediato è richiede
immaginazione, ovvero la capacità di vedere una cosa nel
mondo reale. (Bruno Munari)

7. BEM: dare un nome
La prima difficoltà che troverete, forse l’unica nel BEM, è
trovare il nome giusto.
Obiettivo è rendere il nome semplice e chiaro per fare in
modo che sia comprensibile il perché lo avete scelto, il cosa
significa, e permettere di riutilizzarlo quanto possibile.

8. BEM
Blocchi
Elementi
Modificatori

9. BEM: blocchi
• sono unità logiche dell’interfaccia che contengono degli elementi, ed
altri blocchi
• un tag non può essere due blocchi
• un blocco vive di vita propria e deve poter essere inserito ovunque
• dunque non dovrebbe avere proprietà che definiscono come funziona
rispetto al suo “mondo esterno”
• per essere più riusabile, il nome del blocco non dovrebbe definire
quello che contiene (page, article), ma quale è la sua conformazione
<div class=“blocco”></div>

10. BEM: elementi
• sono tutti i componenti di un blocco
• contiene sempre il nome del blocco
• non può stare fuori dal suo blocco
• un tag non può essere due elementi
• deve avere un nome che esprima la sua conformazione, per
essere il più riutilizzabile possibile
<div class=“blocco”>
<div class=“blocco__elemento”></div>
</div>

11. BEM: modificatori
• si applicano ai blocchi e agli elementi
• modificano il comportamento standard
• solitamente affiancano il nome di base, a meno che non usiate
SASS e un extend della classe base
<div class=“blocco blocco——modificatore”>
<div class=“blocco__elemento”></div>
</div>

12. BEM: composizione
CSS = Cascading Style Sheets
NO l’ereditarietà delle proprietà, dunque il principio base del
CSS a cui siete abituati.
SI composizione, creazione di unità modulari che possono
essere inserite ovunque.
Un codice più facile da capire, da debuggare, da riutilizzare.

13. BEM: file system
# stylesheets
/assets/stylesheets/blocks/button.css
/assets/stylesheets/blocks/canvas.css
/assets/stylesheets/blocks/flag.css

14. Esempio (e spoiler)
.box {
position: relative;
width: 1300px;
}
.box__object {
position: absolute;
}
.box__object——baseline {
bottom: 0;
}
.box__object——left {
left: 160px;
}
<div class="box">
<img src=“assets/images/seaside/sky_day.png" />
<div class="box__object box__object--baseline">
<img src="assets/images/seaside/bg_mountains.png" />
</div>
<div class="box__object box__object--baseline">
<img src="assets/images/seaside/trees.png" />
</div>
<div class="box__object box__object—-baseline box__object——left">
/* house */
</div>
</div>

15. Tutto chiaro?! :)
Fine prima parte

16. Gioco collaborativo
• Per iniziare facile costruiamo dei paesaggi, e
come ogni gioco ha le sue regole.
• Collaborativo perché ogni team si deve auto-
organizzare, e ogni team lavorerà con gli altri a
tutti i paesaggi.

17. Regole del codice
• Ovviamente, rispettate le regole del BEM
• Non utilizzate le immagini come sfondo, utilizzate i tag img che trovate già presenti
• Normalize.css è inserito
• Utilizzate solo nomi inglesi
• Nel CSS utilizzate position absolute e relative, e z-index se necessario
• Utilizzate valori in pixel, non in percentuali
• Mobile first - optional
• Hover per cambio giorno / notte - optional

18. Directory index
# mockups
/mockups/city.pdf
/mockups/countryside.pdf
/mockups/seaside.pdf
# views
/city.html
/countryside.html
/seaside.html
# stylesheets
/assets/stylesheets/city.css
/assets/stylesheets/countryside.css
/assets/stylesheets/seaside.css
# images
/assets/images/city/
/assets/images/countryside/
/assets/images/seaside/

19. Primo turno
• Fare una analisi logica dello scenario
• Valutare quali oggetti hanno tratti comuni e allo
stesso tempo diversi
• Pensare ai nomi dei blocchi, e degli elementi
• Pochi blocchi, espliciti, riutilizzabili

20. Secondo turno
Continuate il lavoro degli altri

21. Turno bonus
Scegliete una pagina web complessa
(es: Facebook, Gmail)
e provate a strutturarla in BEM!

22. Fine!
Grazie per aver partecipato :)
Marco Zampetti
m.zampetti@cantierecreativo.net
twitter: @chrome_fate