Méthode d’intégration HTML avec OOCSS

Le CSS orienté objet ou OOCSS défini par Nicole Sullivan est source d'inspiration.

Cette méthode de travail est à la fois incroyablement efficace et passionnante à mettre en place : elle propose des solutions aux problèmes d'héritage CSS, d'organisation et d'optimisation des feuilles de style. Le principe du CSS Orienté Objet est de séparer le contenu des contenants et de considérer les blocs de contenus comme des objets réutilisables auxquels nous appliquons un habillage graphique. Le code s'en trouve ainsi beaucoup plus optimisé que sur des intégrations HTLM standards. Utiliser pour les sites de moyennes et grandes envergures, on peut aussi s'inspirer de cette méthode pour des projets plus modestes.

1) Division de la page HTML

La page HTML est divisée en 3 parties distinctes auxquels les CSS se rapporteront :

L'entête qui aura pour identifiant unique : #hd
Le corps qui aura pour identifiant unique : #bd
Le pied de page qui aura pour identifiant unique : #ft

<body>
  <div id="hd" role="banner"></div>
  <div id="bd" role="main"></div>
  <div id="ft" role="contentinfo"></div>
</body>

2) Le template

Le template détermine les caractéristiques d'un gabarit réutilisable (colonne centrale, sidebar...).

<body>
 <div id="bd" role="main">
  <div class="tpl-nom-du-gabarit">
  <div class="tpl-wrapper">
   <div class="tpl-col-center"> [contenu du site]</div>
   <div class="tpl-col-right"> [contenu de la sidebar]</div>
  </div>
 </div>
</body>

Remarques : il est recommandé qu'un système de grille complète le template à la condition que le desgin est lui même été conçu sur une grille.

3) La grille

La grille permet d'avoir un colonnage harmonieux sur toutes les pages, son utilisation devient assez vite indispensable. On choisira de préférence une grille en responsive (qui s'adapte automatiquement à la largeur de l'écran) . Le framework Foundation, est ce que j'ai trouvé de mieux jusqu'à présent . Les systèmes de grille sont pratiquement tous construits sur le même principe, à savoir :

Un conteneur regroupant l'ensemble des colonnes : .grid-row
Les cellules .grid-cell-1of3 (une division de la ligne en 3 colonnes)

Exemple de 3 colonnes :

<div class="grid-row"> 
    <div class="grid-cell-1of3"> [Colonne 1] </div> 
    <div class="grid-cell-1of3"> [Colonne 2] </div> 
    <div class="grid-cell-1of3 last"> [Colonne 3] </div> 
  </div>

4) Les modules (ou blocs de contenus)

Les blocs de contenus peuvent être considérés comme des objets redimensionnables, réutilisables et customisable. Nous allons les utiliser principalement dans le cadre de Widget (le contenu éditorial n'a pas forcément besoin de cette structure). Afin d'obtenir un code comphrénsible, la strcuture sera identique selon le type de modules.

<div class="mod-nom_du_module"> 
  <div class="inner"> 
   <div class="hd"> [head] </div>
   <div class="bd"> [body] </div> 
   <div class="ft"> [foot] </div> 
  </div> 
</div>

5 ) Habillage graphique (skin ou customisation)

L'idée est d'appliquer une classe spécialement pour l'habillage graphique (pour des modules, des titres, des sections...) ce qui évite de répéter les codes CSS ou CSS de masse. Dans l'exemple ci-dessous, on rajoute la classe "skin-versionpro", cette classe pourra être utilisée pour "habiller" d'autres modules.

<div class="mod-accordeon skin-versionpro"> 
  <div class="inner"> 
   <div class="hd"> [head] </div>
   <div class="bd"> [body] </div> 
   <div class="ft"> [foot] </div> 
  </div> 
</div>

6) Organisation des CSS

Suivant les besoins du projet, nous pourrons ou non séparer les CSS (une feuille de style pour la grille, une autre pour les modules, une autre pour l'habillage graphique). Par exemple, en responsive design, il peut être intéressant de déclarer une feuille de style commune comportant surtout la customisation des blocs et une feuille de style par résolution d'écran. Côté performance, on peut se poser la question de savoir si OOCSS ne rajoute pas trop de classes HTML ou trop de fichiers CSS et par conséquent fait baisser la note globale du site sur des tests de type Google Speed ou Yslow. En réalité, il faut être prudent lors de l'utilisation de ces outils, car un gain de performance de 20% peut en réalité correspondre à une réduction du temps d'affichage de l'ordre du millionième de seconde : une broutille. Par contre, on fera l'impasse sur les 5 secondes que met la page à charger les images à cause d'une interface graphique trop lourde...