Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

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 ne faut utiliser 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 donc des sélecteurs longs et complexes .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 difficiles à 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.

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.

Don't be the product, buy the product!

Schweinderl