Bien ranger ses styles CSS (avec la règle @import)

Appeler une feuille de style externe

Les styles peuvent être définis directement dans l’en-tête du document, entre les balises <style> et </style> de chaque page. Mais il est plus judicieux de les regrouper dans une feuille de style externe : c’est un fichier contenant toutes les définitions de style, nommé par exemple style.css. Celui-ci sera appelé dans dans le head de cette façon :

Avantage : pour modifier l’apparence d’un site, il n’y a plus qu’un seul fichier à modifier, sans avoir quoique ce soit à changer dans les gabarits de page.

Plusieurs feuilles de style ?

Dans un site à l’habillage complexe et varié, on se retrouve vite avec une feuille de style longue comme le bras, et dans laquelle on se perd lorsqu’on doit y revenir par la suite. D’où l’envie de la subdiviser en plusieurs — l’une stylant par exemple seulement la typographie, l’autre la structure de la page en 2 ou 3 colonnes, etc. —, histoire de s’y retrouver plus facilement. Sans oublier la feuille de style spécifique à l’impression.

Avantage : pour intervenir sur l’habillage graphique du site, par exemple pour modifier le positionnement des blocs principaux en conservant la typo et le reste à l’identique, il suffit de changer l’une de ces feuilles de style annexes.

On préférera ne lier qu’une seule feuille de style aux gabarits de page, les autres pouvant être appelées directement depuis celle-ci.

La règle @import

@import est une propriété CSS2 qui permet aux utilisateurs l’importation de règles de style à partir d’une autre feuille de style.

• @import doit être suivi de l’adresse URI de la feuille de style à intégrer.
• On peut spécifier les médias requis, séparés par des virgules après l’adresse URI. Si le type de média n’est pas précisé, l’import est inconditionnel (équivaut à all).
• Les règles @import doivent précéder toutes autres règles dans la feuille de style.

On peut aussi pousser cette logique jusqu’au bout, en ne mettant QUE des imports dans la feuille de style principale, et rien d’autre. Voici donc, par exemple, ce que contient ma feuille de style principale, appelée style.css :

/* Imported Styles
--------------------------------------- */
@import url("reset.css");
@import url("typo.css");
@import url("forms.css") screen;
@import url("structure.css") screen;
@import url("pages.css") screen;
@import url("print.css") print;

C’est ainsi bien rangé, plus facile à maintenir.

Ce n’est peut-être pas optimisé d’un point de vue performance car ça oblige à lire la première feuille de style pour charger la seconde, mais c’est très pratique, en particulier quand on travaille à plusieurs intervenants sur un projet de site conséquent : il n’y a qu’un seul appel à placer dans les x gabarits HTML, et les modifications de feuilles de style se font en totale indépendance, sans avoir à ajouter ou supprimer d’appel de feuille dans les x head du site.