La Programmation Orientée Objet est un concept qui a fait ses preuves dans la conception de sites internet.

En effet, elle permet d’avoir un code structuré, facilement réutilisable et dont la mise à jour est rapide et aisée.

Pourquoi ne pas l’adapter au CSS ?

A priori, le CSS n’a pas grand chose à voir avec de la POO. Pourtant, à y regarder de plus près, on y retrouve des concepts bien familiers:

• Système de Classes
• Propriétés
• Héritage

Comment l’appliquer au CSS

Les classes CSS

Plutôt que d’attribuer à chaque élément de mise en page une classe CSS dont les propriétés sont spécifiques à cet élément précis, on peut tout à fait prévoir de créer des classes génériques que l’on utilisera au besoin selon la mise en page souhaitée.

Exemple ci-dessous d’une mise en page dite « spécifique »:

index.html

<div class="photo">
  <p>Une photo: <img src="maphoto.jpg" alt="Ma Photo" /></p>
</div>

style.css

.photo{
    float:left;
    font-style:italic;
    font-weight:bold;
    width:50%
}

Il est évident que le code CSS ci-dessous est exclusivement réservé à cet élément « photo ». Pour des éléments quasi similaires (correspondance de deux voire trois propriétés), le code CSS devient redondant, ce qui implique un alourdissement du poids de la feuille de style et la nécessité de passer dans chacune des classes concernées lors de mises à jour.

Exemple ci-dessous d’une mise en page dite « orientée objet »

index.html

<div class="floatleft strong italic half">
  <p>Une photo: <img src="maphoto.jpg" alt="Ma Photo" /></p>
</div>

style.css

.floatleft{
    float:left
}

.strong{
    font-weight:bold
}

.italic{
    font-style:italic
}

.half{
    width:50%
}

Ici au contraire, le code est:

• « générique »,
• réutilisable sur d’autres éléments,
• compréhensible,
• explicite,
• n’alourdit pas la feuille de style (seulement un peu l’index.html vous me direz …)

La nomenclature des classes CSS est importante et doit être bien écrite pour être réutilisable. Ainsi, il ne faut pas écrire:

p.chapeau span.lettrine{
    font-size:2.5em
}

Mais

.chapeau .lettrine{
    font-size:2.5em
}

De cette façon, vous pouvez changer à souhait le code xhtml mais aussi utiliser ces classes sur d’autres éléments.

L’héritage

Quoique vous fassiez, vous l’utilisez. A partir du moment où vous définissez un sous ensemble, c’est de l’héritage. Par exemple :

.mondiv .header p{
    margin:0 10px
}

Après, il convient de l’utiliser à bon escient.

Trop de détails encombre la feuille de style et oblige à redéfinir les propriétés par la suite.

Ainsi:

#header #bandeau .top ul li a{
    text-decoration:underline
}

peut se réduire à :

#header .top li a{
    text-decoration:underline
}

De manière générale, il est plus intéressant d’appliquer des styles par héritage que par définition de classes. De cette manière, il est plus simple de changer la structure sans devoir repasser sur chacun des éléments afin d’y changer la classe.

Exemple:

<div>
  <ul>
    <li><p class="itemlist">Item 1</p></li>
    <li><p class="itemlist">Item 2</p></li>
  </ul>
</div>

Avec comme feuille de style:

.itemlist{
    padding:5px
}

peut être remplacé par:

<div class="list">
  <ul>
    <li><p>Item 1</p></li>
    <li><p>Item 2</p></li>
  </ul>
</div>

et

.list li p{
    padding:5px
}

Enfin, sachez qu’en utilisant trop d’héritage vous pourriez rencontrer des problèmes de redéfinition de classe.

En effet, mettons que vous avez cette classe dans votre page principale:

#content .header p{
    color:blue
}

Et que vous voulez qu’en règle générale tous les paragraphes du « header » soient de couleur rouge. Vous écririez logiquement :

.header p{
    color:red
}

Eh bien, malheureusement, cette dernière propriété ne sera pas prise en compte car la définition précédente à l’aide d’un identifiant est prioritaire par rapport à la définition par la classe.

Vous pourriez toutefois ruser en écrivant :

.header p{
    color:red !important /* Prend le pas sur toutes les définitions */
}

Mais ce n’est pas du joli joli !

Conclusion

Voici donc un aperçu du CSS Orienté Objet, une façon simple, logique et structurée d’améliorer votre intrégration xHTML, qui vous fera gagner du temps précieux, et rendra votre code nettement plus lisible et réutilisable !

Aller plus loin …

• Présentation du concept de CSS Orienté Objet
• Comprendre l’héritage CSS