Il concetto di Object Oriented CSS nasce da alcune slide pubblicate da Nicole Sullivan e rese gratuitamente a disposizione della community dei web designer.
Per poter dare una definizione di Object Oriented CSS dobbiamo essere sicuri di sapere cos'è l'Object Oriented Programming. Prima di proseguire con l'articolo, quindi, verifichiamo di sapere effettivamente di cosa stiamo parlando. Per chi volesse approfondire l'argomento consiglio di leggere la Guida programmazione orientata agli oggetti di Marco Altese.
Cos'è l'Object Oriented CSS
Riportando le nozioni base dell'OOP ai CSS, possiamo affermare che l'Object Oriented CSS consiste nel migliorare il codice CSS dei nostri progetti al fine di velocizzarne le operazioni di stesura, di modifica e di riuso del codice.
Non abbiamo quindi bisogno di imparare nessun nuovo costrutto come accade con i linguaggi di programmazione ma semplicemente imparare ad affinare e rendere più ordinate le tecniche e le regole del CSS che già conosciamo.
Object Oriented CSS, quindi, significa realizzare codice pulito e ben strutturato.
Volendo essere ancora più precisi e chiari l'OO-CSS consiste nel separare il codice CSS a seconda del suo uso, evitando ad esempio di mischiare il codice per la definizione della struttura principale con il codice per la formattazione del testo.
I concetti principali dell'Object Oriented CSS
Tutto il paradigma è incentrato su due concetti molto importanti:
- Separare il contenitore dal contenuto
- Separare la struttura principale della pagina dal design
Vediamoli nel dettaglio per capire meglio di cosa stiamo parlando.
Separare il contenitore dal contenuto
Il concetto è molto semplice da capire e da realizzare. Bisogna realizzare dei contenitori che siano in grado di accettare qualunque tipo di oggetto al proprio interno adattandosi senza avere problemi di layout e visualizzazione.
Bisogna quindi realizzare dei contenitori che siano flessibili e che si adattino, qualunque sia il loro contenuto. Ad esempio, dobbiamo evitare di realizzare un <div> che per essere visualizzato correttamente debba per forza contenere un heading e una lista puntata ma, piuttosto, che renderizzi bene qualunque elemento.
Questo concetto è molto importante per la riusabilità. Realizzare contenitori con questa caratteristica consente di riutilizzare gli stessi in più progetti e/o in più contesti dello stesso progetto senza dover per forza ridefinirne di nuovi.
Questi contenitori possono poi essere adattati al contesto attraverso un'estensione della classe padre proprio come succede nei linguaggi di programmazione con le classi. L'estensione degli oggetti nel CSS può essere realizzata attraverso classi multiple.
Partendo da un codice come il seguente, vediamo come utilizzare le classi multiple:
<div class="box">
<h3>Categorie</h3>
<ul>...</ul>
</div>
.box {
background-color: #f7f7f7;
margin: 10px;
border: 1px solid #a07;
width: 200px;
height: 500px;
}Supponendo di voler modificare il colore di background e del testo all'interno del div.box possiamo agire nella seguente maniera:
<div class="box bg">
<h3>Categorie</h3>
<ul>...</ul>
</div>
.bg {
background-color: #ddd;
color: #222;
}Abbiamo aggiunto la classe bg che va a modificare lo stile del contenitore senza essere costretti a ridefinire un nuovo oggetto, ottenendo il risultato che ci eravamo prefissi. Quando è possibile poi, per avere un codice ancora più pulito, possiamo anche utilizzare i selettori, soprattutto il selettore > che, come sappiamo, cattura gli elementi figli di un oggetto.
Separare la struttura principale della pagina dal design
Questo concetto è molto utilizzato nella realizzazioni di progetti web, soprattutto quando sono molto grandi. Prima di parlare di separare il codice CSS si parla di separare il codice di programmazione dal codice di markup. Infatti è buona prassi evitare di mischiare codice lato server con codice di markup al fine di avere un codice facilmente manutenibile, semplice da leggere e, soprattutto, che consente la modifica del design in maniera molto veloce.
Questa tecnica di progettazione può essere utilizzata anche all’interno del codice CSS stesso con estrema facilità. Il tutto consiste nel separare il codice CSS che realizza il layout della pagina da quello per il design.
Una maniera molto semplice di agire è quella di utilizzare il sistema a griglie che ormai è diventato diffusissimo tra i designer. Concettualmente è quello di cui abbiamo bisogno.
La griglia realizzerà la struttura della pagina, struttura che poi noi andremo a personalizzare con il design del progetto. Al momento sono disponibili moltissimi framework CSS che con davvero pochissimo fatica ci consentono di realizzare il layout della pagina evitando anche ulteriori perdite di tempo dovute al cross-browsing. Tra i più famosi da utilizzare ci sono sicuramente 960gs, Blueprint e YUI Grids.
Un esempio
Possiamo ora realizzare una semplicissima pagina web utilizzando le nozioni apprese finora. Per comodità utilizzeremo il framework 960gs per la realizzazione del layout, mentre noi ci occuperemo della personalizzazione del design e del testo.
Innanzitutto realizziamo un piccolo wireframe per progettare il nostro layout. Ho scelto qualcosa di molto semplice; un layout con due colonne, una per il contenuto della pagina e una per la sidebar.
Utilizzando i template a griglia messi a disposizione dal framework CSS ho progettato un wireframe come il seguente:
Il prossimo passo sarà quello di portare questo layout in codice (X)HTML. Creiamo la struttura del nostro piccolo progetto come nella seguente immagine:
All'interno della cartella css inseriamo i file reset.css, text.css e 960.css che scarichiamo dal sito del framework. Includiamoli all'interno del file index.html che conterrà la seguente struttura:
<div id="container" class="container_12">
<div class="grid_12">#header</div>
<div class="grid_12">#menu</div>
<div class="grid_9">#content</div>
<div class="grid_3">#sidebar</div>
<div class="grid_12">#footer</div>
</div>Il lavoro svolto fino a questo punto ci ha consentito di disporre il layout nella pagina.
Andiamo ora a creare il file style.css in cui incominceremo a personalizzare le dimensioni in altezza della struttura.
Prima però modifichiamo il file index.html inserendo gli id dei contenitori del layout, come nel seguente codice:
<div id="container" class="container_12">
<div id="header" class="grid_12">#header</div>
<div id="menu" class="grid_12">#menu</div>
<div class="grid_9" id="content">#content</div>
<div class="grid_3" id="sidebar">#sidebar</div>
<div id="footer" class="grid_12">#footer</div>
</div>Il codice CSS necessario per creare la struttura è il seguente:
body { background-color: #f7f7f7; }
#container {}
#container > div {
background-color: #ddd;
margin-top: 10px;
text-align: center;
}
#header {
height: 150px;
line-height: 150px;
}
#menu, #footer { height: 30px; }
#content, #sidebar { min-height: 500px; }Il risultato che otterremo è il seguente, che ovviamente coincide con quello progettato con il wireframe:
Possiamo ora riprendere il sorgente del wireframe e incominciare a realizzare il design del progetto. Anche stavolta restiamo su un layout di semplice come quello illustrato dall'immagine seguente:
Una volta ritagliate le immagini dal template, iniziamo a completare il foglio di stile della pagina stando attenti a rispettare le regole che abbiamo esposto nell'articolo.
Il codice necessario è il seguente:
HTML:
<div id="container" class="container_12">
<div id="header" class="grid_12">
<h1><a href="#">Logo</a></h1>
</div>
<div id="menu" class="grid_12">
<ul>
<li><a href="#" class="selected">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div id="content" class="grid_9">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p><img src="../images/image.png" alt="image" /></p>
<p>Pellentesque ...leo.</p>
<p>Pellentesque ...leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<div id="sidebar" class="grid_3">
<h3>Sub-Menu</h3>
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3</li>
<li>Sub-Menu 4</li>
<li>Sub-Menu 5</li>
</ul>
</div>
<div id="footer" class="grid_12">
<p>© 2009 - Lorem Ipsum Dolor Sit Amet</p>
</div>
</div>CSS:
/* layout */
body { background-color: #fff; }
#container {}
#container > div { margin-top: 10px; }
#header {
height: 150px;
line-height: 150px;
}
#menu, #footer {
height: 30px;
line-height: 30px;
}
#content, #sidebar { min-height: 500px; }
/* design */
#container {}
#header {}
#header h1 a {
background: url('../images/logo.jpg') no-repeat;
display: block;
line-height: 9999em;
margin-top: 40px;
width: 450px;
height: 100px;
overflow: hidden;
}
#menu { background: url('../images/menu.jpg') repeat-x; }
#menu ul {
list-style-type: none;
}
#menu ul li {
float: left;
text-align: center;
}
#menu ul li a {
color: #fff;
font-size: 1.2em;
font-weight: bold;
display: block;
width: 120px;
height: 100%;
text-decoration: none;
}
#menu ul li a:hover,
#menu ul li a.selected { text-decoration: underline; }
#content, #sidebar {
background: url('../images/content.jpg') repeat-x;
}
#content h2, #sidebar h2 {
color: #2f6a96;
padding: 20px;
}
#content h3, #sidebar h3 {
color: #2f6a96;
padding: 20px 0 0 10px;
}
#content p, #sidebar p {
padding: 20px;
margin: 0;
text-align: justify;
}
#content img, #sidebar img { padding: 10px; }
#content ul, #sidebar ul { margin-left: 20px; }
#footer {
background-color: #2f6a96;
color: white;
line-height: 30px;
}
#footer p { padding-left: 30px; }Il risultato finale è quello dell'immagine seguente:
È possibile scaricare il pacchetto completo con tutti i file dell'esempio al seguente link.
