OOCSS con SASS Intro. Un breve tutorial della metodologia Object Oriented CSS con l'uso di SASS per migliorare lo sviluppo di siti web su grande scala.

1. {
OOCSS con SASS Intro
Sandro Gullà
Twitter: @sandrogulla
Object Oriented CSS

2. I CSS su grandi siti web nel tempo:
 Crescono
 Vengono modificati in continuazione
 Diventano fragili
 Contengono stili duplicati
 Poco riuso del codice
Nel 2009 Nicole Sullivan introdusse al Web Directions North
una metodologia chiamata OOCSS (Object Oriented CSS).
Per oggetto si intende un pattern visuale che può essere un
blocco HTML, CSS e avvolte JavaScript.
OOCSS - Intro

3. Principi fondamentali:
 Separazione tra struttura e skin
 Struttura: height, width, padding, float ...
 Skin: background, color ...
 Separazione tra contenitore e content
 I componenti si possono spostare da un contenitore all’altro
mantenendo lo stesso stile. Es: il componente .latest-news si
può spostare in .sidebar o in .main-content mantenendo lo stesso
stile.
Principi Fondamentali

4. Vantaggi dell’OOCSS:
 Riusabilità
 Performance
 Efficienza
 Scalabilità
 Mantenibilità
Vantaggi dell’OOCSS

5. Esempio OOCSS
<a href="#" class=“box btn btn-twitter">Twitter</a>
<a href="#" class=“box btn btn-facebook">Facebook</a>
.btn-twitter {
background:red;
}
.btn-facebook {
background:blue;
}
.box{
padding:10px 20px;
}
.btn {
border:3px solid #000;
color:#fff;
border-radius:10px;
}

6. Linee guida
 Evita di usare selettori senza class
(i.e. .sidebar h3)
 Evita gli ID per stilare direttamente
 Evita di concatenare elementi con classi css
(i.e. div.header o h1.title)
 Eccetto casi rari, evita !important
 Usare CSS Lint per controllare il CSS
 Usare le griglie CSS
Linee Guida

7. Esempio OOCSS + SASS
<a href="#" class=“box btn-twitter">Twitter</a>
<a href="#" class=“box btn-facebook">Facebook</a>
.btn-twitter {
@extend .btn;
background:red;
}
.btn-facebook {
@extend .btn;
background:blue;
}
.box{
padding: 10px 20px
}
.btn {
border:3px solid #000;
color:#fff;
border-radius:10px;
}

8. Senza o Con SASS

9. Riferimenti
 http://www.slideshare.net/stubbornella/object-oriented-css
 http://takazudo.github.io/presentation-oocss-sass/#/
 http://www.smashingmagazine.com/2011/12/12/an-
introduction-to-object-oriented-css-oocss/
 http://appendto.com/2014/04/oocss/
Riferimenti

10. Grazie !!!
Sandro Gullà
Twitter: @sandrogulla