Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO (Marco Zampetti)

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

  • Als Erste(r) kommentieren

LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO (Marco Zampetti)

  1. 1. LA METODOLOGIA BEM, SCRIVERE UN CODICE MIGLIORE PER IL PRESENTE ED IL FUTURO Marco Zampetti
 frontend developer
 Cantiere Creativo
  2. 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. 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. 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. 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. 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. 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. 8. BEM Blocchi Elementi Modificatori
  9. 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. 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. 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. 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. 13. BEM: file system # stylesheets /assets/stylesheets/blocks/button.css /assets/stylesheets/blocks/canvas.css /assets/stylesheets/blocks/flag.css
  14. 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. 15. Tutto chiaro?! :) Fine prima parte
  16. 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. 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. 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. 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. 20. Secondo turno Continuate il lavoro degli altri
  21. 21. Turno bonus Scegliete una pagina web complessa
 (es: Facebook, Gmail)
 e provate a strutturarla in BEM!
  22. 22. Fine! Grazie per aver partecipato :) Marco Zampetti
 m.zampetti@cantierecreativo.net
 twitter: @chrome_fate

×