OOCSS (Object Oriented CSS).

Introduction.

OOCSS est un ensemble de bonnes pratiques pour réaliser des CSS, initiées par Nicole Sullivan. Ce ne sont pas des règles absolues, juste une manière de faire tout comme BEM. Les deux principes mis en avant sont:

  1. La séparation de la structure et de l'apparence.
  2. La séparation du conteneur et du contenu.

Ce qui dans les faits, nous favoriserons les classes plutôt que les identifiants et aussi à factoriser les éléments visuels répétés. Voir code ci-dessous.

<button class="btn small-btn"></button>
<button class="btn big-btn"></button>
								

L'idée étant d'avoir un code plus facile à maintenir, plus souple mais aussi plus rapide à son exécution...

Le second principe est d'éviter les cascades comme '.maBoderBox . monTitre' car l'apparence de '.monTitre' est lié à '.maBorderBox'. Une classe '.boxTitre' semblerait plus préférable... Par contre, un point négatif est soulevé: le découpage de l'interface ne devrait pas se faire selon son apparence dans le cadre d'une application javascript.

On peut distinguer les éléments purement décoratifs et ceux qui correspondent la structure de l'interface. Et si une valeur est partagée par plusieurs éléments, il serait de bon ton de définir une classe transversale et donc de créer de multiples contextes CSS globaux. Là, ça devient assez obscure...

Bon, si j'ai une majorité d'éléments qui partagent un padding à 10px, je crée une classe tranversale: pad-commonBox. Pas super limpide non plus...

.commonBox {
....
}

.pad-commonBox {
padding: 10px;
}
								

Bon, ce qu'il faut retenir, c'est qu'en séparant les éléments visuels des éléments structurels nous créons des éléments réutilisables sur des éléments partageant les mêmes propriétés, on parle alors d'objets.


Les choses à ne pas faire.

Bon, même si on nage dans le brouillard, cela devrait éclaircir un peu le paysage.

  • Créer des styles dépendant du contexte.
main > p#texte > span.big {
/* pas flexible */
}
								
  • Lier un tag à une classe. Sauf dans le cas d'une surcharge pour certains éléments spécifiques.
div.maClasse {
....
}

Préférer:

.maClasse {
....
}

strong.error {
/* permet de surcharger les régles par défaut de .error */
}
								
  • Utiliser des identifiants.
  • Faire une sprite contenant toutes les images.
  • Utiliser des ombres et des bords arrondis sur des background irréguliers.
  • Utiliser des images comme du texte.
  • Ajuster très précisément la hauteur. La hauteur d'un élément se controle par le contenu.
  • Faire de la redondance. Si deux éléments sont très proches visuellement, en choisir un seul.
  • Faire de l'optimisation précoce.

Exemple.

Comme on dit, un p'tit dessin vaut mieux qu'un long discours. Bon, l'exemple ci-dessous est assez caricatural... Le but étant de définir des propriétés générique puis de les surcharger pour les combiner.

/* ### EXEMPLE CLASSIQUE #### */
.texte {
font-family: verdana;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #000;
}

#texte-gras {
font-family: verdana;
font-size: 1.2em;
font-style: normal;
font-weight: bold;
color: #000;
}

#texte-italic {
font-family: verdana;
font-size: 1em;
font-style: italic;
font-weight: normal;
text-decoration: underline;
color: #000;
}

/* #### HTML CORRESPONDANT  ### */
<p class="texte"></p>
<p id="texte-gras"></p>
<p id="texte-italic"></p>
								

Une fois le code retravaillé:

.texte {
font-family: verdana;
font-size: 1em;
font-style: normal;
font-weight: normal;
color: #000;
}

.texte-gras {
font-size: 1.2em;
font-weight: bold;
}

.texte-italic {
font-style: italic;
text-decoration: underline;
}

/* ### HTML CORRESPONDANT ### */
<p class="texte"></p>
<p class="texte texte-gras"></p>
<p class="texte texte-italic"></p>
								

Exemple de séparation visuelle et sémantique.

Ce dernier petit exemple vient illustrer qu'il est une mauvaise pratique de choisir son niveau de titre en fonction de sa taille. Ce qui améliorerait la sémantique, l'accessibilité mais aussi le SEO.

h1 {
font-family: verdana;

color: #000;
}

h1, h1-size {
font-size: 2em;
}

h2, h2-size {
font-size: 1.8em;
}

h3, h3-size {
font-size: 1em;
}

<header>
	<h1>Titre</h1>
</header>
<footer>
	<h1 class="h3-size"></h1>
</footer>
								

Notes: ce type de code ne fonctionne pas tout à fait dans ma page 'Premiers pas avec Flex et OOCSS' dans 'Mon bac à sable'. Problème d'héritage de la police sur mon 'h4-size', le font-family. A revoir !


Documents et sources:

Article de Tarh sur developpez.com Article de Nicolas Carlo sur nicospeon.com

Et un autre site découvert sur le tard qui rend ces concepts plus accessible quand on débute...

Article de Mathieu Religieux sur design-fluide.com

Keep and Try it ! Dernière mise à jour: 22/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11