Scrivere codice CSS…
… e dormire sogni tranquilli
TEMPI COSTI
QUALITÀ
SPECIFICITÀ
Internet Explorer 6
•Prevedibile
•Riusabile
•Scalabile
•Mantenibile
Se lo vogliamo prevedibile…
Se lo vogliamo prevedibile…
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Se lo vogliamo prevedibile…
Se lo vogliamo riusabile…
http://oocss.org/
Se lo vogliamo riusabile…
Se lo vogliamo riusabile…
http://bradfrost.com/blog/post/atomic-web-design/
Se lo vogliamo scalabile …
ARCHITETTURA DEI CSS
Se lo vogliamo scalabile …
Se lo vogliamo scalabile …
Se lo vogliamo scalabile …
Se lo vogliamo mantenibile…
Se lo vogliamo mantenibile…
Se lo vogliamo mantenibile…
Se lo vogliamo mantenibile…
http://cssguidelin.es/
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
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à)
Grazie per l'attenzione
@nicoladm79