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

Table des matières + X

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

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


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[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


Références

Recommandations W3C

Où dans la recommandation ?


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

Un oubli, une erreur, une suggestion ? N'hésitez pas à me contacter sur pgoiffon -at- free.fr