|<- [[High-level Overview]]|[[The Single Responsibility Principle]] ->|

====== Object-orientation ======

L'orientation objet est un paradigme de programmation qui divise un programme plus large en de plus petits objets in(ter)dépendants qui ont tous leur propre rôle et responsabilité. Citons Wikipédia :

> La programmation Orientée Objet (POO) est un paradigme de programmation qui représente le principe d'objets (…) qui sont généralement des instances de classes, (et sont) utilisées les unes avec les autres pour concevoir des applications ou programmes informatiques.

Lorsque appliquée au CSS, l'orientation objet est appelée object-oriented CSS, ou OOCSS. Le terme OOCSS a été inventé et popularisé par Nicole Sullivan, dont le Media Object est devenu la figure emblématique de la méthodologie.

L'OOCSS définit la séparation de l'UI entre structure et skin; diviser les composant de l'UI en leur forme structurelle sous-jacente et leur partie cosmétique. Cela signifie que l'on peut recycler des design patterns très communes et récurrentes à peu de frais sans avoir à nécessairement recycler les détails spécifiques de leur implémentation dans le même temps. L'OOCSS prmeut la réutilisation du code, qui nous rend plus rapides, tout en limitant la taille de notre base de code.
Les aspects structurels peuvent être vu comme des squelettes : des éléments communs, récurrents qui fournissent une ossature neutre connue comme des objets et abstractions. Les objets et abstractions sont de simples design patterns dénués de tout aspect cosmétique; on extrait les aspects communs d'une série de composants en un objet commun. Le skin est un calque que l'on ajoute (optionnellement) à notre structure afin de donner à nos objets et abstractions un look-and-feel spécifique. Regardons un exemple :

<code>
/**
 * A simple, design-free button object. Extend this object with a `.btn--*` skin
 * class.
 */
.btn {
  display: inline-block;
  padding: 1em 2em;
  vertical-align: middle;
}


/**
 * Positive buttons’ skin. Extends `.btn`.
 */
.btn--positive {
  background-color: green;
  color: white;
}

/**
 * Negative buttons’ skin. Extends `.btn`.
 */
.btn--negative {
  background-color: red;
  color: white;
}
</code>

Ci-dessus, nous pouvons voir comment la classe .btn {} fournit simplement une structure de style à un élément, et ne s'intéresse pas des aspect cosmétiques. On ajoute à l'objet .btn {} une seconde classe telle que .btn--negative {} en vue de donner à ce node du DOM des spécificités cosmétiques :

<code>
<button class="btn  btn--negative">Delete</button>
</code>

favorisez une approche à classes multiples à l'utilisation de fonctionnalités comme @extend: utilisez des classes multiples dans votre markup — en opposition au wrapping d'une classe dans l'autre en utilisant un préprocesseur —

  - cela vous donne une meilleure trace écrite dans votre balisage, et vous autorise à voir rapidement et explicitement quelles classes agissent sur quels éléments HTML;
  - vous autorise des compositions plus complexes en cela que les classes ne sont pas liée à d'autres styles dans votre CSS.

Lorsque vous concevez un composant UI, essayer de voir si vous pouvez le diviser en deux parties : un pour la structure (paddings, layouts, etc.) et un autre pour le skin (couleurs, typographies, etc.).

===== Further Reading =====

  - [[http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/|The media object saves hundreds of lines of code]]
  - [[http://csswizardry.com/2013/05/the-flag-object/|The flag object]]
  - [[http://csswizardry.com/2014/03/naming-ui-components-in-oocss/|Naming UI components in OOCSS]]