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 :

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.

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

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom