romy.tetue.net

Conception web, UI et UX,
sémantique, ergonomie et accessibilité.


Méthode Daisy : les CSS feuille à feuille

Retranscription de ma mini-conf du jeudi 14 à Paris Web 2010

14 octobre 2010,
par Romy Têtue


Produire l’habillage CSS d’un site en équipe est souvent galère. Sans être obligé d’adopter un framework et devoir former tous les intégrateurs sur ce moule, on peut déjà mettre un peu de méthode en répartissant le code en différentes feuilles de styles conventionnelles, indépendantes et interchangeables. De cette façon, elles sont aussi ré-utilisables d’un site à l’autre, ce qui permet de capitaliser plutôt que de tout recommencer à chaque projet.

Voici donc la méthode que je viens de présenter à Paris Web.

CSS ? C'est le Super Souk !

Bienvenue chez vous ! C’est le bazar, n’est-ce pas, dans votre code CSS ?

Le CSS ? C’est une vraie galère dès qu’on doit y revenir, dès qu’on repasse derrière quelqu’un d’autre et même quand on doit replonger dans son propre code après longtemps... et ce n’est vraiment pas aisé de coder à plusieurs mains, en équipe. Mais comment diable s’y prend-on ?

Continuer à coder chaque projet de zéro...

Voulez-vous vraiment continuer à coder chaque projet à partir de zéro ? Au prétexte fallacieux de faire du « sur mesure » ? Comme si chaque site était une œuvre unique ? L’intégration HTML/CSS telle qu’elle est actuellement pratiquée reste encore très artisanale. C’est un travail laborieux et minutieux, comparable à celui de la dentellière. Ce n’est pas très rentable, ni très passionnant, de recommencer toujours un peu la même chose. On gagnerait à mutualiser.

Adopter un framework ?

Beaucoup se demandent alors s’il ne vaut pas mieux adopter un « framework CSS ». Expliquons un peu, car l’association de ces deux mots suscite souvent l’incompréhension, alors qu’on identifie mieux ce que c’est pour d’autres langages informatiques : comme Zend ou Symfony en PHP et comme Prototype, Mootools ou JQuery en JavaScript, les frameworks CSS les plus utilisés actuellement sont BluePrint ou 960 Grid System.

Mais c’est quoi, concrètement, un framework CSS ? On pourrait dire que les frameworks sont au code ce que les préfabriqués sont au BTP. Ce sont plusieurs feuilles de style pré-écrites, qu’on ajoute en début de projet, qui posent un socle de compatibilité multi-navigateurs, mettent à disposition des classes prêtes à l’emploi qui facilitent et accélèrent la mise en page et, selon les frameworks, apportent une certaine harmonie graphique, des modules, etc. ce qui est autant de temps gagné en production.

Cependant ils restent peu utilisés : il semble que guère plus de 40 % des projets soient développés à l’aide d’un framework CSS [1]. Pourquoi ?

Parce qu’il y a une certaine réticence à adopter un code qui n’est pas le sien, un temps d’apprentissage considéré comme trop important avant d’arriver à une bonne maîtrise, parce que certains considèrent que les frameworks imposent un carcan trop contraignant qui uniformise les sites et bride la créativité et d’autres en jugent le code rédhibitoirement non sémantique... et aussi parce qu’on ne sait pas lequel choisir parmi les frameworks disponibles.

Exploitons mieux le code existant !

Je vous propose plus simple : exploiter l’existant ! Cessons d’hésiter, au risque du grand écart, entre nos habitudes artisanales et l’adoption d’un framework. Penchons-nous plutôt sur le code déjà produit pour l’étudier et en tirer avantage.

Prenons par exemple, l’une de ces feuilles de style longue comme le bras. Parce qu’on a appris qu’il vaut mieux, pour des raisons de performance, limiter les appels aux fichiers externes, nous avons pris l’habitude de rassembler tout notre code en une feuille externe unique. Bien !

Du général au particulier

Projet après projet, on a aussi pris la bonne habitude, plus ou moins consciente, d’ordonner notre code, du général au particulier, car, rappelons-le, lorsque plusieurs règles concernent un même élément, c’est la dernière qui a causé qui a raison (cf. règle de la cascade).

Plus précisément, on remarque que les choses sont ainsi ordonnées : le reset vient toujours en premier, judicieusement suivi d’une redéfinition des balises HTML, ce qui forme une base typographique, sans oublier les formulaires, calvaire de l’intégrateur, avant d’attaquer le positionnement des blocs principaux de la page, parfois à l’aide d’une grille... etc... en terminant par les variantes par gabarit : par exemple la page d’accueil qui, étant assez souvent différente du reste du site, est traitée en dernier, comme exception à ce qui précède.

Maintenant que nous avons identifié des ensembles, allons-y franchement et découpons en autant de feuilles de style individuelles : reset.css, typo.css, forms.css, grid.css, layout.css, skin.css, pages.css, etc.

Découper en autant de feuilles de style

Prenons maintenant un nouveau projet de site web. Appliquons-lui les feuilles de style précédemment définies. La première, reset.css est typiquement le genre de feuille qu’on ré-emploie à l’identique d’un projet à l’autre. La grid.css est aussi mutualisée. La typo.css sera certainement adaptée, plus ou moins selon que l’identité visuelle du site repose sur la typographie ou pas. Reste à se concentrer sur layout.css et skin.css, nécessairement spécifiques. À l’approche d’Hallowen, il suffira de remplacer cette dernière, sans toucher aux autres, pour habiller le site en orange et noir. L’idée est bien que ces feuilles-là soient interchangeables.

Je n’ai pas encore évoqué une chose pourtant importante... Il est utopique de croire que l’on maîtrise entièrement le code CSS d’un projet, quand bien même on est le seul intervenant, puisqu’on utilise aussi des outils et autres modules qui apportent leurs propres styles : tel CMS, ses plugins, tel carrousel, etc. Plus personne n’est seul à produire son CSS.

On passera donc ensuite, pour ajouter des surcharges correctives, les variantes par gabarit regroupées dans pages.css et, selon les pratiques, les variantes par navigateur, comme ie.css, et par media, comme print.css.

Effeuillons la marguerite des CSS

On le voit, au final cela forme une belle marguerite — d’où le nom de la méthode [2] — bien garnie, qui laisser rêver de répartir la production de chaque feuille à des intervenants différents, pour avancer plus vite... On peut raisonnablement imaginer que le graphiste qui choisit les polices et travaille la typo, fournisse la feuille typo.css prête à l’emploi [3], tandis que le dev front, qui programme les gabarits, se charge de coder leur CSS spécifique dans pages.css [4].

Attention, cette méthode simple, qui paraît même simpliste, peut apporter beaucoup ! Avec cette approche le code est mutualisé, ré-utilisable, modulaire et adaptable et le travail collaboratif devient possible. Enfin, en passant cette marguerite à la moulinette d’un script qui concatène ces feuilles en une seule [5], on ne dégrade pas la performance en production.

Pour résumer, cette méthode fonctionne si :

  • on s’accorde sur cette nomenclature conventionnelle
  • on délimite bien le périmètre de chaque fichier
  • on respecte bien l’ordre (cf. cascade et héritage)
  • on s’outille d’un script de concaténation des CSS

[1] Voir ces maigres données statistiques : Quelles sont vos pratiques en CSS ?

[2] En anglais daisy signifie marguerite, fleur aux nombreux pétales, qu’on effeuille... Le nom de cette méthode n’a rien à voir avec le personnage de dessin animé Disney homonyme. Ça ne fait pas non plus référence à l’acronyme DAISY, qui désigne un format pour livres audio destinés aux personnes déficientes visuelles.

[3] Voir à ce sujet l’excellente conférence de Francis Chouquet : CSS3/Photoshop : quel avenir pour le métier de web designer ?.

[4] Le métier d’intégrateur me semble voué à disparaître : l’intégration HTML/CSS sera plus judicieusement répartie entre les graphistes (web) et les développeurs (front).

[5] Ne pas confondre avec les compresseurs CSS comme YUI Compressor ou CSS Compressor ! Il faut programmer un script côté serveur (PHP, ASP ou autre), qui concatène les feuilles en une seule, laquelle sera insérée à la place, sur les pages en production. Certains outils de publication en sont nativement équipés, comme SPIP 2, qui concatène et minifie les fichiers CSS et JS externes de façon vraiment très appréciable.

Voter pour cet artice sur hellocoton.fr Netvibes Del.ico.us

Vos commentaires

  • Le 15 octobre 2010 à 03:18, par baroug Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Très chouette.

  • Le 15 octobre 2010 à 05:24, par Cécile Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Ça peut paraitre simple, mais que nenni ! Savoir prendre du temps pour mieux s’organiser et à long terme en gagner. À pratiquer sans modération :)

  • Le 15 octobre 2010 à 06:45, par GizMecano Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Je m’aperçois que, tel monsieur Jourdain, j’employais un peu cette méthode Marguerite sans le savoir. Mais une question pratique, cependant : quelle méthode choisir pour passer « cette marguerite à la moulinette d’un script qui concatène (...) ces feuilles en une seule » et éviter les multiples @import ?

  • Le 15 octobre 2010 à 07:44, par Kaelig Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Bonjour,

    C’est tout à fait le genre d’approche que je recommande, surtout sur les gros projets.

    Pour ma part j’ai mis à dispo les sources de ce qui me sert à chaque nouveau projet sur github : http://github.com/Kaelig/Project-Starter

    Ce framework ne demande qu’à être amélioré donc forkez-le !

  • Le 15 octobre 2010 à 08:08, par opi Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Bonne approche, que j’utilise en partie, le plus souvent ; Mais cet article la formalise vraiment bien.
    A relire avant mes futurs projets, sans faute !

    ( et merci @Kaelig pour le starter, je vais étudier ca.)

  • Le 15 octobre 2010 à 10:05, par Maïeul Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    A oui, je comprends mieux !

    Pour ce qui est de la gestion des plusieurs imports c’est résolu avec SPIP (que je crois tu connais ;)) grâce à la compression CSS qui fabrique un fichier unique par media.

  • Le 18 octobre 2010 à 00:08, par Romy Têtue Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    @Maïeul : non, SPIP ne gère pas plusieurs @import, ce qui reste le fait des CSS. Il fait mieux que ça : il compacte les feuilles de style linkées dans le head (mais justement pas celles appelées par une règle @import, qu’il vaut donc mieux éviter).

  • Le 18 octobre 2010 à 10:11, par Maïeul Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    @tetue : oui erreur sémantique de ma part.

    Mais note que tu ne parlais pas explicitement d’@import mais bien d’import tout court. Dans une certaine mesure via le header c’est aussi un import (mais pas selon le même point de vue).

    D’ailleurs je n’ai jamais très bien compris l’intérêt du @import.

  • Le 18 octobre 2010 à 15:47, par Romy Têtue Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    La règle CSS @import permet déjà de répartir son code en plusieurs fichiers selon les médias auxquels ils sont destinés, par exemple, comme je l’expliquais dans cet article, plus ancien : Bien ranger ses styles CSS.

    Et non, je ne parle pas ici d’« import », mais de concaténation de fichiers. Plus précisément d’un script côté serveur (PHP, ASP ou autre) qui met bout à bout les 36 pétales de ma marguerite, pour former un seul fichier.

  • Le 18 octobre 2010 à 19:27, par Maïeul Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Certes, mais tu peux répartir en plusieurs fichiers selon le type de media avec l’attribut media de la balise rel.

    Je crois qu’il y a une confusion de ma part sur le terme import, que j’entend en un sens plus large que toi...

    enfin, pas de quoi en faire un fromage, on comprend ta méthode et ses interêts.

    ps : je lirai ton autre article un soir

  • Le 18 octobre 2010 à 19:48, par Darklg Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Tres belle methode qui s’accordera a merveille avec mon script de compression des CSS :) Merci !
    http://blog.darklg.fr/328/compresser-ranger-css-php/

  • Le 30 octobre 2010 à 17:24, par Cédric Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    Pour la compression des CSS, il y a une comparaison intéressante sur phpied.com. Il en ressort que l’outil le plus efficace est CSSTidy qui a le bon gout d’avoir une implémentation PHP ainsi qu’une version desktop exécutable pour toutes les plateformes.

    La concaténation des feuilles de style, elle, peut se faire simplement par Apache, comme suggéré dans boilerplate avec :

    • dans un fichier styles.combined.css :
    • dans le fichier .htaccess
  • Le 6 mai à 19:46, par tykayn Gravatar En réponse à : Méthode Daisy : les CSS feuille à feuille

    une méthode que je recommande fortement, merci pour cet article.
    une bonne chose c’est de combiner tout ça avec SASS ;)

Un message, un commentaire ?


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