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

1. 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.

2. CSS 2 #

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

2.1. 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]

2.2. 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">

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.

2.3. 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é).

3. 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

4. Variables CSS #

Une recommandation^[4] permet de répondre à ce besoin... Mais à l'heure de l'écriture de ces lignes (août 2014) elle est toujours en working draft, et le support est très réduit : uniquement Firefox 31+ ! Cf CanIUse.

Un article sur DevMo bien intéressant sur le sujet : Using CSS variables - CSS | MDN

5. Références #

5.1. Recommandations W3C #

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

5.2. 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é

Création le 24/08/2005
Dernière mise à jour le 14/08/2014

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