5 règles de base pour avoir un css propre

BEM

Le css est une langage à part entière et pas aussi simple qu’il ne parait. Sans respecter quelques règles de base, on peut pas se retrouver rapidement avec un code compliqué à lire et difficile à débugger. Voici une liste non exhaustive de bonnes pratiques qui pourront vous aider à créer ou à maintenir une feuille de style CSS évolutive.

1 – Utiliser plusieurs fichiers css dans un projet

Il est préférable de segmenter son CSS en une multitude de fichiers chacun correspondant à un module, un plugin, ou à une page tout simplement. Libre à vous de choisir votre organisation car le découpage en fichiers permet de s’y retrouver plus facilement lorsqu’il faut faire évoluer ou maintenir le projet.

Par exemple, pour WordPress, il peut-être judicieux de découper votre code par modèle de contenu.

  • page.css
  • single.css
  • header.css
  • footer.css
  • archive.css
  • template-extra.css

L’intérêt de découper le CSS en fichiers multiples est décupler surtout si vous utilisez un préprocesseur CSS (Sass ou Less).

2 – Adopter une convention de Nommage pour l’ensemble des projets

Il est important d’avoir une convention de nommage pour les éléments html.
Si dans votre site web par exemple le menu principal devrait toujours s’appeler “.primary-nav” ou “.nav-primary” ou “.navPrimary”.

Il n’existe pas vraiment une règle infaillible mais des recommandations existe sur la meilleure façon de nommer ces blocs afin d’avoir une norme et s’y tenir pour l’ensemble du projet. Cependant si vous choisissez de respecter la méthodologie BEM, alors certains des exemples cités ci-dessus seront à éviter.

3 – Utiliser BEM (Bloc, Element, Modifier)

BEM est une méthodologie de nommage qui tend à découper les entités de votre page en blocs et éléments.

Pour faire plus simple une page peut contenir plusieurs blocs, chacun de ces blocs peuvent contenir un ou plusieurs éléments qui lui sont propres. Enfin chacun de ces éléments peut avoir un état qui est modifié selon un événement ou action de l’utilisateur, c’est le modifier.

Par exemple, une page web est composée de 4 blocs :

  • Navigation ( menu )
  • Main Content ( contenu principal )
  • Side Bar ( colonne de droite généralement )
  • Footer

La sidebar est composé de différents éléments :

  • Titre ( hn )
  • Liste des derniers articles
  • Liste des derniers commentaires

L’élément “Liste des derniers articles” peut avoir plusieurs états :

  • Cacher ( display:none; )
  • Visible ( display:block )

4 – Adopter le CSS Orienté Objet (OOCSS)

Il s’agit de découper les classes en tentant compte la logique du développement orienté objet que l’on rencontre dans des langages de programmation comme le PHP ou smarty.

Prenons l’exemple d’un bouton jaune et bleu :

Dans ces deux exemples, il y a une répétition de code, on va plutôt essayer de factoriser les propriétés que ces boutons ont en commun. Puis créer une classe complémentaires correspondant à leurs spécificités.

En HTML, le bouton sera appelé comme suit :

On fait cohabiter les classes côte à côte. L’intérêt est de conserver une consistance de base pour tous les éléments boutons, on les surcharge au besoin avec une classe supplémentaire qui vient étendre les propriétés du bouton, dans notre cas on rajoute une couleur de bordure et une couleur de texte.

5 – Prendre en compte la flexiblité du code en utilisant des sélecteurs quasi-qualifiés

La portabilité permet de pouvoir faire évoluer notre projet sans être limiter sur les balises HTML utilisé par exemple. Prenons un exemple simple :

La classe bouton est déclarée mais uniquement utilisable avec une balise href. Si on veut utiliser la classe bouton avec une balise div, ce n’est plus possible.
Il faut donc retirer la référence à la balise HTML. Si on veut aider à la lecture du code et explicité que la classe bouton est à utiliser préférablement avec une balise href alors on pourrait rédiger la classe comme suit :

On va priviligier l’utilisation de classe et ainsi pourra etre utiliser sur toute type de balise. C’est ce qu’on appelle un sélecteur quasi-qualifié.

5 – Comprendre la spécificité

La spécificité détermine quelle règle CSS est appliquée par le navigateur. Il y a une hiérarchie pas forcément intuitive dans l’ordre d’application des règles CSS.

Il faut garder en tête que tout sélecteur doit être déclarer avec le moins de spécificité possible.

Préférer :

plutôt que :

Ceci vous évitera dans la plupart des cas de faire face à des conflits liés à la spécificité CSS.

Imbrication ou Nesting
L’imbrication des classes CSS a été introduit par les langages tels que Sass et Less.
L’imbrication a des avantages évident lorsque l’on rédige le code mais génère un code CSS parfois trop spécifique.
Il faut tenter d’avoir le minimum d’imbrications. Moins il y a de sélecteurs, mieux c’est. Ainsi on aura moins de mauvaises surprises.

Conclusion

Voici un ensemble de best practice qui pourra nous aider ami intégrateur.

Cependant avec l’évolution des CMS c’est parfois difficile de mettre en pratique ce type de règles.
Par exemple lorsqu’il est nécessaire de styliser un thème WordPress/drupal et un plugin comme WooCommerce, les règles de nommage CSS ne sont pas forcément homogènes et le templating n’est pas forcement flexible.

Répondre