L’intégration avec OOCSS

Le CSS orienté objet ou OOCSS en anglais pour « Object-Oriented CSS » est un concept mis en place par Nicole Sullivan ,consultante front-end spécialisée dans les standards du web et la performance des sites à fort trafic.
Le principe de l'OOCSS est de considérer les différents éléments du site comme des objets réutilisables auxquels nous appliquons un style. Cela permet d'avoir un code plus optimisé et structuré. Notre CSS devient alors facilement réutilisable et la mise à jour devient rapide.

L'OOCSS se rapproche de la programmation orientée objet car l'on peut retrouver des concepts familiers à celle-ci : système de classes, propriétés et héritage. Par exemple, plutôt que d'attribuer à chaque élément de la page HTML, une classe CSS dont les propriétés sont spécifiques à cet élément, nous allons alors préférer lui appliquer une classe générique pour pouvoir l'utiliser ailleurs dans notre site. 

Pour ce faire, nous utiliserons des templates, des modules et des classes spécialement dédiés à l'habillage graphique.

1/ Le template

Le template (ou gabarit) permet de réutiliser un code HTML, que ce soit pour faire une colonne, une sidebar, un panneau d’information…
L’idée ici est de regrouper des éléments similaires pour éviter que le code CSS ne devienne redondant et donc de faire du CSS de masse.

Nous pouvons par exemple imaginer un template pour la page d’accueil qui sera différente des pages d’actualités qui elles, partagent des articles.

Chaque page peut être basée sur un système de grille, cela permet de rester flexible et de pouvoir toujours adapter le contenu facilement au site si l’on utilise une grille responsive (par exemple Foundation ou Bootstrap).

feature-grid-1 

La grille, en l’additionnant au template devient indispensable tellement son utilisation facilite la mise en page.

Il s'agit alors de séparer le contenu du site en plusieurs "layouts" (ou gabarits) qui seront alors utilisés pour différencier le code spécifique à une page du code qui se répète partout. 

2/ Les modules

Les modules peuvent être considérés comme des objets réutilisables peu importe l’environnement de code. Il s'agit par exemple des boutons, des encadrés, de la gestion des polices de caractère, des listes, formulaires, tableaux etc.

A titre d’exemple, voici le module bouton d’un site web : 

module-boutons-oocss

Il y a plusieurs types de boutons mais ils ont tous des caractéristiques semblables, il s’agit de boutons contenant un lien, avec la même typographie et le même traitement.

Pour les boutons spécifiques qui sont différents, il s’agit d’étendre la classe principale .btn et faire par exemple .btn-secondary.

Ici, le .btn est notre bouton de base, qui aura un style prédéfini. Le .btn-secondary est un bouton secondaire qui possède les propriétés du premier bouton grâce à @extend .btn et le code qui est rajouté sera seulement les différences entre ces deux boutons comme la couleur.

3/ Habillage graphique 

L’habillage graphique sert à ajouter une classe spécialement pour l’habillage graphique (pour des titres, des sections, des sidebars…).

Pour conclure, grâce au OOCSS, le code devient alors réutilisable, modulable, maintenable. Les classes CSS n'ont plus une valeur sémantique mais servent à découper le site en modules afin de gagner en efficacité. C'est une autre façon de penser le code et le fait de découper tout le site en se servant de SASS, par exemple, permet une meilleure prise en main et rend celui-ci plus logique.

modules-oocss

La base est posée, il s'agit des couleurs, de la typographie, du body etc. Puis la page est divisée en layout comme le header, footer... ensuite les modules sont les éléments réutilisables et pour finir les tools sont les différentes fonctions déjà mises en place qui peuvent servir n'importe où dans le code.

Pour en savoir plus : 

http://fr.slideshare.net/stubbornella/object-oriented-css

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.