Bien ranger ses styles CSS

avec la règle @import

4 janvier 2006,
par Romy Têtue

Mots-clefs associés à cet article :

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.

  • @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("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.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • 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 ?

  • 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 ??

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

  • 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 vu comme un bug dans un navigateur... est en fait un comportement voulu dans un autre. Pour en savoir plus, lire : FOUC, Si vous avez du temps à perdre..., billet de Laurent Denis, 2004.

  • 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 @import dans la page (X)HTML. Les @import sont 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

  • 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

  • Le 29 octobre à 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 @import a 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.

  • Le 13 novembre à 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

forum message

Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Qui êtes-vous ? (optionnel)

Suivre les commentaires : RSS 2.0 | Atom