CSS : application de la même mise en forme sur plusieurs éléments (groupement, pré-processeurs, variables)

Introduction

Il est assez commun de se retrouver avec des déclarations identiques, répétées entre plusieurs éléments. Une couleur de fond par exemple... Cette multiplication des déclarations pose évidemment des problèmes de maintenance et lecture des fichiers CSS...

Nous allons aborder dans ce document les moyens existants pour répondre à un besoin naturel de factorisation.

CSS 2

Moyens les plus anciens, et très largement supportés !

Un seule déclaration CSS sur plusieurs éléments

On peut grouper plusieurs sélecteurs ensembles en les séparant par des virgules :

.class1, .class2, #foobar, ...
{
...
}

C'est la notion de groupement définie dans la recommandation CSS^[1]

Plusieurs classes sur un élément (x)HTML

En (x)HTML, on peut préciser plusieurs classes sur un élément donné :

<p id="foobar" class="class1 class2">

Un exemple à voir dans ce codepen !

On trouvera cette information dans la définition de l'attribut class de la recommandation HTML^[2].

Cette méthode est souvent utilisée pour les CSS Sprites : une classe définit le modèle et une autre positionne simplement le background-position.

Notes

• Il vaut mieux, autant que possible, éviter d'utiliser les classes. En effet, une multiplication de class=... dans le (x)HTML va à l'encontre de la logique de séparation contenu / mise en forme !
• Attention aux conflits ! On peut avoir la même propriété CSS pour un élément donné définit plusieurs fois... Dans ce cas, la recommandation^[3] détaille quoi faire en cas de conflit de définition de propriétés (voyez en particulier la spécificité^[4]).

Pré-processeurs

On peut également réaliser du traitement... Les deux systèmes les plus populaires :

LESS

http://lesscss.org/

SAAS

http://sass-lang.com/

Un article qui en parle d'expérience : What's Wrong With CSS

Variables CSS

Une recommandation^[5] permet de répondre à ce besoin, et maintenant (février 2026) le support est assez large !

Support des variables CSS sur caniuse : CSS Variables (Custom Properties) | Can I use... Support tables for HTML5, CSS3, etc

Quelques règles à retenir :

• Le nom de la variable personnalisée commencera par 2 tirets : --maVariable
• A noter que les variables auront la portée du sélecteur dans lesquelles on les défini. Pour avoir des variables globales, on peut utiliser la pseudo classe root

:root {
  --primary-color: black;
  --secondary-color: white;
}

.class1 {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

.class2 {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}

On peut aussi redéfinir les valeurs des variables :

p {
  --primary-color: black;
  --secondary-color: white;

  color: var(--primary-color);
  background-color: var(--secondary-color);
}

p.class1 {
  --primary-color: cyan;
  --secondary-color: black;
}

p.class2 {
  --primary-color: red;
  --secondary-color: white;
}

Un article de référence sur le MDN : Using CSS custom properties (variables) - CSS | MDN

Et un autre très détaillé et non moins didactique chez AlsaCréations : Tout savoir sur les variables CSS (custom properties) - Alsacreations

Références

Recommandations W3C

• Recommandation HTML 4.01
• Recommandation XHTML 1.0
• Recommandation XHTML 1.1
• Recommandation CSS 2.2
• [5] CSS Custom Properties for Cascading Variables Module Level 1

Où dans la recommandation ?

• [1] Chapitre 5.2.1 Grouping de la recommandation CSS
• [2] Dans la recommandation HTML 4.01, définition de l'attribut class, indiquant que plusieurs classes peuvent être spécifiées.
• [3] Toujours dans la même recommandation, le chapitre 6.4 The cascade, indiquant les règles suivies pour l'application de telle ou telle valeur en cas de conflit entre de multiples déclarations de la même propriété
• [4] Dans les recommandations CSS 2.2 : Calculating a selector's specificity

Création le 24/08/2005
Dernière mise à jour le 23/02/2026

Un oubli, une erreur, une suggestion ? Rendez-vous sur le dépôt GitHub !