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