CSS - Orienté Objet, ce qu'il faut savoir
Le code Orienté Objet (OO) voilà deux mots bien à la mode. A savoir que si le code Orienté Objet a une signification claire en ce qui concerne le langage algorithmique comme le PHP, le Python, le Perl ou le Ruby ; la dénomination Orienté Objet est beaucoup moins évidente pour un langage déclaratif comme le CSS.
Le principe
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.
A priori, le CSS n’a pas grand chose à voir avec de la POO. Pourtant, on y retrouve des concepts bien familiers :
- Système de Classes
- Propriétés
- Héritage
Les deux principes fondateurs sont :
- "Séparer la structure et l’habillage" et "séparer le contenu du contenant"
- Le CSS, c’est du code, et les professionels du Web doivent traiter en tant que tel
Exemple
Effectivement en CSS, il est possible de séparer la structure et l’habillage. Il est possible de définir des "class" pour styler un élément de contenu.
Un élément de contenu peut être défini par une ou plusieurs "class" ; dans ce cas le code peut comporter une "class" pour dire qu'un élément à une largeur de 300 px et une autre "class" pour dire que le texte est de couleur bleu.
Une "class" (nom : blockmedium) comporte le code de dimension (structure), une autre "class" (nom : textecouleur (avec du bleu)) comporte le code de couleur (bleu) pour le texte (habillage). Un élement avec les "class" blockmedium+textecouleur aura une dimension de 300 pixels et un texte de couleur bleu.
L'avantage est donc de définir une seule fois dans sa feuille de style la dimension de 300 pixels ou encore la couleur de texte bleu. Si le texte doit devenir vert, on change bleu en vert une fois pour tous les blocs avec cette "class". Il s'agit d'une sorte de factorisation du code afin d'alléger le poids des fichiers et améliorer la maintenance de ses sites.
Les Frameworks
Le CSS Orienté Objet consiste à définir des styles pour des objets qui s'affichent sur une page, les frameworks CSS du marché propose leur logique de définition des objets.
L'idée est de partir d'un style par défaut, une fois pour toute, et de se servir pour tous ses futurs projets. Cette base permet de définir des règles générales pour ne pas avoir à les recoder, l'objectif est d'avoir un rendu similaire sur chacun des navigateurs (en ayant un code optimisé) ; ainsi les développeurs ont l'habitude de définir :
- typography.css pour les règles typographiques de base,
- grid.css pour la mise en page par grille ou
- layout.css pour des maquette générales,
- form.css pour des styles de formulaires basiques,
- general.css pour tout autre style supplémentaire.
Cette séparation des fichiers CSS, lorsqu'on a plusieurs pages ou plusieurs sites, permet de modifier un seul fichier pour changer ses règles typographiques ou de placement des éléments. Ceci évite le code spaghetti, ce code plus propre offre la possibilité de décliner des pages de manière plus rapide.
On reprochera aux Frameworks de gérer un code qu'on ne connait pas et d'avoir un code non sémantisé en fonction de son projet. Un site peut se retrouver avec du code inutile et non spécifiquement optimisé.
Les Frameworks sont destinés à des développeurs d'expérience devant gérer ou décliner un nombre important de sites. Je vous laisse découvrir la présentation de Nicole Sullivan sur OOCSS (ci-dessus).