En CSS, n’utilisez que des classes

Photo de la mer

CSS permets d’utiliser plein de sélecteurs raffinés pour ajouter du style à vos éléments. Je soutiens qu’il faut éviter autant que possible d’utiliser quoi que ce soit d’autre que le sélecteur de classes (.foo).

Pour que vos styles soit réutilisables et ne soit plus aussi liés à votre HTML fini donc d’utiliser des sélecteurs d’identifiants, de balises, d’attributs ou de parenté.

Voici pourquoi.

Identifiants

#content { color: red; }

Les sélecteurs par ID vous empêchent de réutiliser vos styles, tout simplement.

Ils ont un autre inconvénient important : leur spécificité est extrèmement importante. C’est le début d’une lutte pour la spécificité si on veut remplacer des styles. On se retrouve avec des sélecteurs longs et complexes comme .page.about-page #content.important { color: red; }.

Balises

h1 { color: grey; }
.side ul { margin: 0; }

Ces sélecteurs sont trop généralistes. Si jamais vous utilisez un h1 autre part sur votre site ou que vous voulez une liste différente dans .side vous devrez commencer par annuler tous les styles.

Conséquence : vos CSS seront plus lourdes, se répèteront, vos styles ne seront pas indépendants les uns envers les autres et le tout sera plus difficile à maintenir à l’avenir.

Attributs

[disabled] { opacity: .5; }
[data-triggered="true"] { background: green; }

Comme ces attributs sont sémantiques ils souffrent du même problème que les balises, impossible de réutiliser les styles associés sur d’autres éléments. Par exemple un bouton peut être disabled mais pas un lien qui aurait un style de bouton.

En terme de performances également : pour ne pas ralentir les pages avec beaucoup d’éléments DOM il ne faut pas utiliser les attributs seuls mais toujours y coller au moins une classe, un nom de balise ou un sélecteur enfant (.btn[disabled], input[disabled] ou [disabled] .btn). Raison de plus de les éviter.

Parenté

.about-page .sidebar {}
.sidebar + .article {}
.article > div {}

Les sélecteurs descendants, adjacents et enfants sont également à éviter car ils ont une très grande dépendance sur votre HTML. Cela veut dire que changer l’HTML implique de changer votre CSS. Ils seront également très peu réutilisables.

Il est difficile de se séparer du sélecteur descendant, mais il faut essayer de le minimiser, surtout en SCSS où c’est si facile d’indenter des sélecteurs.

Universel

* { margin: 0; }

En plus d’être un trou à performances, ce sélecteur touche trop d’éléments et oblige souvent d’écraser les styles appliqués. Cela n’aide pas à ce que le CSS généré soit réutilisable facilement, ou qu’il n’impacte pas le reste du site.

Classes

.foo {}

Les classes en revanche peuvent être réutilisées, déplacées et ne dépendent pas de la sémantique de votre document.

En utilisant uniquement des classes vous pourrez réutiliser vos styles quelle que soit la sémantique. Votre .cool-bloc pourra être appliqué sur une div, une section, un form ou une nav selon l’utilité de ce bloc.

1 fernandez claude :

Je pense que le premier point à considérer pour élaborer une page web est la manière dont elle sera indexée par les moteurs de recherche, en particulier Google. Il faut donc lire les préconisations de Google lui-même. Par exemple, les balises comme h1, h2…, le gras, l’italique sont utilisées par Google pour établir les termes d’indexation. Par ailleurs, il me semble que la meilleure condition de pérennité du code html est d’éviter les complications inutiles qui bien souvent n’apportent rien sur le plan esthétique sinon du clinquant.

2 Thomas L. (@ookook) :

L’approche class-only est en effet très séduisante et à vrai dire convaincante: je ne vois pas de contre-indication.

C’en est désagréable que tu ais systématiquement raison au niveau CSS ;)

Sunfox