Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scrivere codice CSS e dormire tranquilli

666 views

Published on

La mia presentazione al CSSDay 2015 a Faenza.
Se la specificità dei selettori non ti fa dormire, oppure se la notte sogni classi che si sovrascrivono all'infinito, allora è arrivato il momento di riorganizzare il tuo metodo di lavoro e iniziare a scrivere codice mantenibile. Questo talk è un breve viaggio tra le metodologie più in voga e le best practice che possono essere applicate nel mondo enterprise ma anche nei piccoli progetti.

Published in: Internet
  • Be the first to comment

Scrivere codice CSS e dormire tranquilli

  1. 1. Scrivere codice CSS… … e dormire sogni tranquilli
  2. 2. TEMPI COSTI QUALITÀ
  3. 3. SPECIFICITÀ Internet Explorer 6
  4. 4. •Prevedibile •Riusabile •Scalabile •Mantenibile
  5. 5. Se lo vogliamo prevedibile…
  6. 6. Se lo vogliamo prevedibile…
  7. 7. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html Se lo vogliamo prevedibile…
  8. 8. Se lo vogliamo riusabile… http://oocss.org/
  9. 9. Se lo vogliamo riusabile…
  10. 10. Se lo vogliamo riusabile… http://bradfrost.com/blog/post/atomic-web-design/
  11. 11. Se lo vogliamo scalabile … ARCHITETTURA DEI CSS
  12. 12. Se lo vogliamo scalabile …
  13. 13. Se lo vogliamo scalabile …
  14. 14. Se lo vogliamo scalabile …
  15. 15. Se lo vogliamo mantenibile…
  16. 16. Se lo vogliamo mantenibile…
  17. 17. Se lo vogliamo mantenibile…
  18. 18. Se lo vogliamo mantenibile… http://cssguidelin.es/
  19. 19. Riepilogo • Prevedibile – Reset / Normalize – CSS Frameworks – Occhio alla specificità • Riusabile – OOCSS – Preprocessori CSS – Atomic Design • Scalabile – Architettura dei CSS • Mantenibile – Naming Convention – Pulizia del codice – Coding Guidelines
  20. 20. Bibliografia • http://www.slideshare.net/stubbornella/css-bloat • http://www.sitepoint.com/css-architectures-scalable-and- modular-approaches/ • http://oocss.org/ • https://smacss.com/ • http://sass-lang.com/ • http://lesscss.org/ • http://cssguidelin.es/ • https://addons.mozilla.org/it/firefox/addon/dust-me- selectors/ • http://specificity.keegan.st/ (Calcolatore di specificità)
  21. 21. Grazie per l'attenzione @nicoladm79

×