Le single responsibility principle est un paradigme qui, de manière très libre, établit que tous les éléments de code (dans notre cas, les classes) devraient se focaliser sur une seule et unique chose. Plus formellement :
…le principe de responsabilité unique établit que chaque contexte (classe, fonction, variable, etc.) ne devrait avoir qu'une seule responsabilité, et que cette responsabilité devrait être totalement encapsulée par le contexte.
Cela signifie pour nous que notre CSS devrait être composée de séries de classes bien plus petites qui devraient se focaliser sur des fonctionnalités très spécifiques et limitées. Cela signifie le besoin de décomposer l'UI en ses plus petits composants qui correspondent chacun à une unique responsabilité; ils ne font que leur travail, mais peuvent être très facilement combinés et composé pour créer des structures bien plus versatiles et complexes. Prenons quelques exemple de CSS qui n'adhère pas au principe de responsabilité unique :
.error-message {
display: block;
padding: 10px;
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
background-color: #fee;
color: #f00;
font-weight: bold;
}
.success-message {
display: block;
padding: 10px;
border-top: 1px solid #0f0;
border-bottom: 1px solid #0f0;
background-color: #efe;
color: #0f0;
font-weight: bold;
}
Nous pouvons voir ici que — malgré un nommage correspondant à un cas d'utilisation très spécifique — ces classes prennent en charge de nombreux aspects : layout, structure, et cosmétique. Nous avons aussi beaucoup de répétition. Nous avons besoin de refactorer ce code pour résumer quelques objets partagés (OOCSS) et bring it more inline avec le principe de responsabilité unique. Nous pouvons diviser ces deux classes en quatre avec de bien plus petites responsabilités :
.box {
display: block;
padding: 10px;
}
.message {
border-style: solid;
border-width: 1px 0;
font-weight: bold;
}
.message--error {
background-color: #fee;
color: #f00;
}
.message--success {
background-color: #efe;
color: #0f0;
}
Nous pouvons maintenant utiliser une abstraction générale qui peut vivre, et être utilisée, de manière totalement séparée de notre composant message qui peut être étendu par nombre de classes aux plus petites responsabilités. Le nombre de répétitions a été grandement limité, et notre capacité à étendre et composer nos CSS à été grandement augmenté. C'est un bon exemple d'OOCSS et du principe de responsabilité unique travaillant en tandem.
En se focalisant sur des responsabilités uniques, on peut donner bien plus de flexibilité, et étendre les fonctions des composants devient très simple en s'en tenant au open/closed principle, que nous allons regarder maintenant.