Maintenant que nous avons posé les principes modernes de construction des CSS durant cette série d’articles, nous allons y confronter des approches en vogue. Rappelons-nous ces principes :

• Du plus général au plus spécifique
• Séparation structure/présentation autant que possible
• Orthogonalité
• Possibilité de prendre des conventions
• Possibilité de produire des guides de styles
• Poids réduit
• Sélecteurs efficaces
• Sélecteurs qualifiants
• Possibilité de penser en-dehors de la boîte
• Approche DRY
• Évite d’y revenir

Rajoutons quelques bonus :

• Tire parti des outils comme les pré-processeurs
• Capacité à aider à travailler depuis plusieurs postes (intégration, graphisme, développement, etc.)

Des approches en vogue

Cinq méthodes/approches vont être passées au crible : l’intégration classique, SMACSS, OOCSS, la méthode Daisy et BEM.

L’intégration classique

Nous aurions bien pu l’appeler « l’intégration à Papa », toutefois, le terme « intégration classique » sera moins irrévérencieux :).

Ses principes sont connus de tous, et nous n’avons pas mâché nos efforts ici-même pour les disséminer. Ce sont tout simplement la stricte utilisation des concepts de base de l’intégration :

• séparation structure/présentation ;
• un élément unique est signalé par un id, via une class s’il n’est pas unique ;
• ils sont stylés d’après leurs id/class ;
• on tire parti de la cascade autant que possible.

Confrontons l’intégration classique face aux principes d’intégration moderne !

Le tableau est sans appel : cette méthode pose des problèmes. Si vous n’en êtes pas convaincu, vous pouvez lire ou relire « CSS, l’âge de raison ».

Remarque : utiliser cette méthode n’est pas une erreur en soi et n’empêchera fondamentalement pas un site de fonctionner. Les limites viendront plutôt avec une forte maintenance, du fait de son manque de souplesse.

SMACSS

SMACSS pour Scalable and Modular Approach for CSS a été imaginée par Jonathan Snook. Comme son nom l’indique, cette méthode a été pensée spécialement pour produire des CSS qui « scalent » le mieux possible.

Selon cette méthode, Il existe cinq catégories de règles :

• la base : les resets, normalisations, etc. ;
• le layout global : la présentation globale du site (les grands ensembles) ;
• les modules : les parties autonomes qui peuvent être réutilisées ;
• les états : les différents états d’un module (ex : un menu ouvert/fermé, liens actif/survolé, etc.) ;
• les thèmes : si votre projet contient plusieurs designs (forum, webmail, etc.).

Les principes sont les suivants :

• Catégoriser les règles comme ci-dessus ;
• Limiter la profondeur d’application des styles (éviter des styles qui s’appliquent trop profondément et qui génèrent des effets de bords hasardeux) et découpler la structure de la présentation ;
• Travailler la performance des sélecteurs.

Confrontons SMACSS à nos principes !

Le constat est sans appel : SMACSS répond également bien à des problématiques d’intégration modernes. Cette approche est particulièrement adaptée sur des applications ou des sites à visée applicative.

OOCSS

Les CSS orientées objet ont été imaginées par Nicole Sullivan. Ses constats étaient les suivants :

• les CSS prenaient trop de poids ;
• la réutilisation du code était quasi-inexistante : on parle de relation 1:1 => la CSS grossit proportionnellement au site ;
• le code est trop peu robuste, car trop couplé à la structure.

Les deux principes de base d’OOCSS sont les suivants :

• séparer la structure de l’apparence ;
• séparer le contenu du contenant.

L’idée est de créer une bibliothèque de composants, tous réutilisables à souhait. Ces composants deviennent donc des objets. Cela peut aller de simples boutons jusqu’à des objets comme une nouvelle sur un blog (titre, date, corps, etc.).

De bonnes et mauvaises pratiques découlent de cette approche, vous pouvez les consulter sur cet article : « Plongée au cœur de l’OOCSS ».

Confrontons OOCSS à nos principes d’intégration modernes !

Le tableau récapitulatif est parlant : OOCSS est robuste et répond à de nombreuses problématiques des sites modernes. Ses seuls « défauts » sont d’être souvent vue à tort comme un bazooka lourd à manier sur de petits sites, et d’avoir une petite tendance à générer beaucoup de classes sur la structure.

Reste encore à définir les « petits » sites : avec la démocratisation du responsive, n’importe quelle intégration peut être vite pointue. Quand au nombre de classes, est-ce vraiment un drame ? Il est raisonnable d’en douter fortement.

D’autres approches intéressantes

La méthode Daisy

La méthode Daisy a été pensée par Romy Duhem-Verdiere. Elle est partie du postulat que CSS est souvent un joyeux bazar et que les productions de CSS étaient trop artisanales. Elle en a déduit de grands ensembles savamment ordonnés (resets, typographie, layout, grid, etc.) afin de :

• penser plus modulaire, plus adaptable et plus réutilisable ;
• capitaliser sur l’existant ;
• permettre du travail collaboratif et l’inclusion de styles imposés par des composantes du projet (CMS, plugins, etc.).

Comme cette méthode est plus une méthode d’organisation que d’approche pure de conception des CSS, la confronter directement à tous les principes n’est pas pertinent : plusieurs sont non-applicables. Par exemple la méthode peut très bien se marier avec des pré-processeurs et très bien fonctionner sans.

Les points forts de cette approche sont les suivants :

• le travail en équipe est particulièrement facilité ;
• la prise en compte de styles propres aux CMS a également été bien pensée ;
• la décomposition de chaque ensemble (typographie, etc.) est très fine, ce qui permet un rangement très pointu et très efficace des règles.

Cette méthode se marie très bien avec d’autres préceptes des autres méthodes, ce qui en fait un terreau fertile, si j’ose dire (« daisy » veut dire Marguerite en anglais).

À noter, les problématiques de cohabitation avec des CMS grincheux (comprenez qui imposent des styles) a été bien pensée. En résulte une approche pouvant même se diviser sur plusieurs postes différents, et permettre à l’intégration de se marier mieux avec des contraintes purement CMS-iennes.

Assurément, la méthode Daisy répond à de grosses problématiques d’intégration.

BEM

BEM signifie Block Element Modifier. Cette méthode a été élaborée par Yandex et publiée en 2010. Elle se décompose en deux points :

• Produire une structure globale en identifiant les blocs principaux d’une page ou d’une application (ce qu’on appelle l’arbre BEM) ;
• et offrir une convention de nommage, qui a d’ailleurs rencontré une certaine popularité.

Un bloc est une entité indépendante des autres, un élément est un constituant d’un bloc et un modifieur permet d’indiquer une variation d’un bloc ou d’un élément (un cas particulier, etc.). Exemple :

.blog-billet {
/* un bloc : un billet d'un blog */
}
.blog-billet__titre {
/* un élément d'un billet : le titre */
}
.blog-billet__titre--breaking {
/* un modifieur : un titre d'un billet important */
}

Les points forts de cette méthode :

• le découplage structure/styles est plutôt aisé ;
• l’information véhiculée par cette convention est pratique et aide bien à la compréhension ;
• les sélecteurs sont efficaces et qualifiants ;
• la ré-utilisabilité est plutôt favorisée ;
• la méthode se marie très bien avec les pré-processeurs.

BEM est devenue rapidement populaire, le seul reproche qui lui est couramment fait est d’être parfois… trop verbeuse.

Conclusion

Comme attendu, chaque méthode a ses forces et ses faiblesses. Il est aisé de comprendre qu’au-delà des effets de mode, certaines tirent leur épingle du jeu : en les confrontant aux grands principes d’intégration moderne, les résultats sont éloquents.

Typiquement, ces méthodes sont des efforts d’industrialisation qu’il serait bien regrettable d’ignorer. Et libre à vous de prendre ce dont vous avez besoin dans chacune, mais cela, nous l’aborderons dans le prochain et dernier article !

Références, compléments

• CSS, l’âge de raison
• Plongée au cœur d’OOCSS
• Object Oriented CSS
• An introduction to OOCSS
• Site de SMACSS
• Your CSS is a mess
• La méthode Daisy
• BEM Method
• Définitions autour de BEM
• Bonnes pratiques en CSS : BEM et OOCSS

Note

Cet article fait partie de la série « Grands principes de construction moderne de CSS ».