Ordre d’appel des styles dans SPIP

La méthode Daisy appliquée à SPIP

27 mai 2011,
par Romy Têtue

Mots-clefs associés à cet article :

En adoptant un ordre d’appel en 3 temps, qui donne successivement la main à la base CSS, aux plugins, puis au webmestre, la méthode Daisy permet de limiter les risques de conflit de style liés aux apports des différents plugins, pour une meilleure modularité du projet.

Voici comment elle est appliquée dans SPIP, via la nouvelle « base CSS 2 » et quasiment à l’identique dans la dernière version SPIP 3.

Ordre d’appel des feuilles de style

La méthode Daisy appliquée à SPIP

  1. Base CSS
    Cette base CSS insère les fichiers présents qui portent ces noms (d’après la nomenclature Daisy), en première position, avant toute autre feuille de style et dans l’ordre suivant :
    1. reset.css : correction des styles par défaut (mise à zéro multinavigateurs)
    2. clear.css [*] : trucs pour faciliter la mise en page
    3. typo.css [*] : base typographique
    4. form.css : base pour les formulaires
    5. etc.
    6. grid.css (si vous la fournissez)
    7. layout.css (à remplacer par le vôtre)
  2. Plugins
    Après les styles associés au code généré par SPIP (dans spip.css), les plugins insèrent leurs feuilles de style ensuite (via #INSERT_HEAD_CSS). Ils bénéficient donc de cette base CSS. On aura par exemple :
    • colorbox.css
    • comments.css
    • etc.
  3. Styles perso
    Personnalisez en ajoutant vos styles en dernier pour avoir le dernier mot, comme ceci (en autant de feuilles que bon vous semble) :
    [<link rel="stylesheet" href="(#CHEMIN{css/perso.css}|direction_css)" type="text/css" />]

Comme on le voit, les déclarations CSS sont ici regroupées par fonctionnalité (et non par média, navigateur ou autre). L’on procède ensuite par surcharges successives, chacun son tour.

Remarques et avantages

Plus besoin de spip_style.css !

Les feuilles de style historiques de SPIP (spip_style.css, spip_formulaire.css, etc.) ne doivent pas être utilisées, puisque cette base CSS les remplace. Celles-ci disparaissent d’ailleurs de SPIP 3, qui adopte cette base CSS pour l’espace privé, depuis la révision 17937.

Pas besoin de feuilles par navigateur

Mieux vaut utiliser les classes conditionnelles, notamment pour Internet Explorer : « .ie », « .ie6 », « .ie7 », etc.

Pas besoin de feuilles par média

Sauf cas particulier, les surcharges pour l’impression et autres medias s’effectuent au fil de l’eau, dans la même feuille, grâce à la règle CSS @media suivie directement du type. De cette façon, on conserve groupées toutes les déclarations qui concernent un même élément, ce qui améliore la modularité et facilite la maintenance.

Pas besoin de feuilles par langue

Il n’est pas nécessaire de fournir de feuille pour chaque version linguistique d’un site, même au sens de lecture inversé comme l’arabe ou l’hébreu, puisque SPIP génère les feuilles nécessaires (grâce au filtre |direction_css), en inversant les valeurs right et left. Kiffant !
Si besoin, utiliser les sélecteurs de langue « .fr », « .en », « .de », etc.

Pas besoin de script de compression

On le sait, démultiplier ainsi les fichiers n’est pas très performant. Mais ce n’est pas un problème ici, puisque SPIP se charge, de façon très appréciable, de compacter (concaténer et minifier) toutes les feuilles de style en une seule [*]. Il suffit pour cela d’« activer la compression » des CSS, depuis l’espace privé.

Vos commentaires

  • Le 15 juillet 2011 à 16:43, par Fab1988 En réponse à : La méthode Daisy appliquée à SPIP

    Merci pour vos conseils ! Ils sont très utiles surtout lorsque l’on débute comme moi dans la programmation. Je vous lis vraiment avec plaisir.

  • Le 17 juin 2016 à 13:13, par Yohoo En réponse à : Ordre d’appel des styles dans SPIP

    Juste un truc que je ne comprend pas : comment modifie t-on les styles des articles dans l’interface privé à partir de notre dossier squelettes.

    J’ai essayé de mettre typo.css ou typo.css.html a plein d’endroit de mon fichier squelettes ( /css ; /themes ; /themes/spip ). Rien n’y fait ...

  • Le 17 juin 2016 à 13:32, par Yohoo En réponse à : Ordre d’appel des styles dans SPIP

    J’ai trouvé la réponse à ma question ici :
    http://forum.spip.net/fr_247799.html

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