Classite ou OOCSS ?

Il est vrai qu’en travaillant avec les préprocesseurs, et pour peu qu’on soit sensible à la programmation orientée objet, on arrive vite à mettre en place les mêmes mécaniques d’optimisation et forcément à adopter les mêmes réflexes. Après tout, pourquoi ne pas appliquer ces concepts à nos feuilles de style ? Jusqu’à l’apparition des préprocesseurs nous étions constamment tiraillés entre opter pour une forme de classite aiguë beaucoup plus orientée objet ou employer des jeux fins de sélecteurs plus proche d’un aspect puriste.

Classite pour ou contre ?

D’un côté, la classite nous apporte la souplesse de travail et la mutualisation des rendus d’affichage, mais en contrepartie elle alourdie considérablement le HTML et surtout, ajoute des éléments pas nécessaires structurellement parlant à notre code, et souvent peu sémantiques. Par ailleurs, l’usage exclusif de sélecteurs va naturellement cumuler les règles de déclarations, complexifier les modifications ou adaptations, mais par contre, il ne sera pas nécessaire de devoir intervenir sur le code HTML et encore moins l’alourdir.

De manière plus concrète, prenons un exemple très simple : imaginons que dans notre charte graphique il soit nécessaire de souligner, de même manière visuelle, à la fois les titres d’articles et les éléments d’emphase de citation de pied de page. Nous pourrions soit adopter une méthode objet :

.soulignement {
   /* déclarations*/
}
<article>
   <h1 class="soulignement"></h1>
</article>
<footer>
   <blockquote>Citation ayant <strong class="soulignement">des emphases</strong></ blockquote>
</footer>

Sélecteurs tout autant verbeux et lourds

Soit une méthode ne s’appuyant que sur les sélecteurs, du fait qu’il n’est pas nécessaire d’intervenir sur le code HTML :

article h1,  footer blockquote>strong {
   /* déclarations*/
}

Il est vrai que, vu sous cet angle-là, la seconde solution semble plus souple et plus rapide, mais à l’usage et dans la complexité d’architecture des sites, elle est toujours forcément plus complexe à maintenir et à faire évoluer que la première.

En fait, si l’on regarde bien, la question ne se pose plus, enfin plus vraiment, car rien ne nous empêche d’optimiser au maximum nos CSS, en les basant exclusivement sur des sélecteurs hyper fins, et de précision quasi chirurgicale, et de s’appuyer sur une logique complètement orientée objet, en utilisant des préprocesseurs pour les mettre en place.

Louis Lazaris présente bien le sujet sur son article An Introduction To Object Oriented CSS (OOCSS) paru chez Smashing Magazine et Ian Storm Taylor va plus loin sur son blog, en associant SASS et OOCSS dans son article OOCSS + Sass = The best way to CSS. N’oubliez surtout pas de vous rapprocher du site central sur OOCSS.