Ranger ses styles dans une feuille de style externe, une seule, principale. La subdiviser en plusieurs pour se simplifier la vie. Et importer ces dernières directement via une feuille de style principale. Et hop, c’est beau, c’est propre et surtout bien plus facile à mettre à jour !
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 :
<link rel="stylesheet" href="style.css" type="text/css" media="all" />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.
-
@importdoit ê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
@importdoivent 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("formulaires.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 la navigateur à 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.
Vos commentaires
1. Le 25 avril 2006 à 12:58, par Grégoire
En réponse à : Bien ranger ses styles CSS
Le problème du @import c’est que l’on risque un clignotement de la page le temps que le navigateur charge/importe le style.
non ?
2. Le 26 avril 2006 à 17:13, par Romy Têtue
En réponse à : Bien ranger ses styles CSS
Y’a pas de raison. En tout cas, ni rien vu de tel, ni entendu parler.
Avec quel navigateur ??
3. Le 27 avril 2006 à 18:26, par Gilles
En réponse à : Bien ranger ses styles CSS
En effet, ça arrive. Pour supprimer cet effet particulièrement désagréable avec (au pif) IE5+/Win , il suffit de rajouter une balise
<link>ou<script>dans son entête : http://www.bluerobot.com/web/css/fo...4. Le 19 juillet 2006 à 20:23, par Romy Têtue
En réponse à : Bien ranger ses styles CSS
Il faut aussi noter que le FOUC . Pour en savoir plus, lire : FOUC, Si vous avez du temps à perdre..., billet de Laurent Denis, 2004.
5. Le 4 août 2006 à 00:40, par André Vincent
En réponse à : Bien ranger ses styles CSS
Romy a raison. Pas de problème, même avec IE/Win 5.x.
Si on lit bien l’article (et si on vérifie le code source de la présente page), la feuille principale est appelée par un
LINK, donc aucun@importdans la page (X)HTML. Les@importsont appelés DANS la feuille de style. Donc aucun problème avec le bug de flashing dans IE/Win.La technique ici décrite est donc non seulement compatible avec IE/Win, mais même tout à fait recommandable pour justement contourner les bugs de IE/Win.
Merci Romy
6. Le 13 juin 2008 à 13:17, par Manar
En réponse à : Bien ranger ses styles CSS
yeaaaaaaaaaaaah,
j’adore ce site, j’apprends beaucoup, Meuuuuurci beaucoup.
cette technique de @import me plait bien.
long comme le bras : ça m’a fait rire ça. et m’a fait penser à tous mes bras hahaha
7. Le 29 octobre 2019 à 16:33, par Cendre
En réponse à : Bien ranger ses styles CSS
Dis ?
Ton article est de 2006 : est-il toujours d’actualité ?
Je lis que
@importa le défaut de générer des chargement successifs (et non parallèles) en plus de générer plus d’appels serveurs...En pratique : dans notre projet, on abandonne sass pour passer en pur css.
css fournit des variables maintenant !
Mais sass nous faisait aussi la concaténation de plusieurs fichiers en un seul.
Donc soit on garde un seul fichier de 1500 lignes (y’a pire, m’enfin...), soit on mets 4 inclusions de style dans le
<head>, soit on met des@import.8. Le 13 novembre 2019 à 14:29, par Romy Têtue
En réponse à : Bien ranger ses styles CSS
Arf, bonne question ! Oui et non.
Oui, il est toujours sain de bien ranger son code CSS en le répartissant en fichiers séparés. Ce que j’ai par la suite développé avec la méthode Daisy, toujours valable, dont cet article était un des prémices.
Mais, plutôt que d’utiliser la règle CSS
@import, mieux vaut concaténer les différentes feuilles en une seule, soit en pré-, soit en post-processing, afin de n’avoir qu’un seul appel final, à une unique feuille de style externe.Ceci dit, perso, je préfère un code bien rangé (qui est bien souvent consécutivement léger) en plusieurs feuilles, qu’une indigeste soupe de spaghetti en une seule feuille bien lourde. Parce qu’il me semble toujours préférable de privilégier la maintenabilité sur la performance.
Répondre à cet article
Suivre les commentaires :
| 