CSS  »  Articoli  »  Mondo CSS 

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;
}

Altri articoli

Altre guide

Altre newsletter