Frameworks CSS + Reset CSS : design from scratch

Je n'ai pas résisté à l'envie de vous proposer ma traduction de l'article CSS Frameworks + CSS Reset : Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d'un Reset CSS, pour s'affranchir des différences de rendu entre les navigateurs. L'article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et s'achève par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d'éventuels retours sur la traduction, ce billet est en version bêta.

Quelque soit le projet, il y a toujours un moment où il faut définir des classes ou des identifiants sur lesquels on a déjà travaillé. Or, nous ne sommes pas obligés de réécrire le même code CSS ou (X)HTML encore et encore. Pour éviter les erreurs il est préférable de démarrer avec un fichier reprenant les éléments récurrents plutôt que de réinventer la roue.

C'est là que les framework et les reset CSS pointent le bout de leur nez. En les utilisant, vous avez une feuille de style par défaut et un marquage impeccable, vous gagnez du temps et vous êtes assurés d'avoir un code de bonne qualité dès le départ. Mais qu'est-ce vraiment qu'un framework ? Et en quoi la remise à zéro des styles CSS est-elle utile ?

Jettons un oeil sur les principes sous-jacents aux frameworks CSS, sur leurs avantages et inconvénients, sur les frameworks CSS les plus populaires et la douzaine de feuille de style par défaut que l'on peut utiliser lorsqu'on travaille sur le design d'un nouveau site web.

• Cet article ne couvre pas l'ensemble des outils et techniques concernant les grilles de mise en pages. Vous pouvez approfondir la question du design web basé sur l'utilisation d'une grille en lisant l'article Designing With Grid-Based Approach.
• Vous trouverez des centaines de templates CSS dans l'article Free CSS Layouts and Templates.
• Merci de noter que cet article traite des frameworks CSS, pas des frameworks de développement côté serveur comme CakePHP et encore moins des frameworks de développement web tels que Coda ou Dreamweaver.

• Un framework peut être défini comme un environnement ou un cadre de travail fournissant une structure conceptuelle que vous utiliserez pour démarrer vos projets de sites web. Par exemple, au lieu de définir une remise à zéro globale, une ligne de base cohérente pour vos textes, des règles typographiques ou encore des styles de base pour les formulaires à chaque fois que vous commencez un nouveau projet, vous pouvez mettre en place un style par défaut une fois pour toute et vous en servir pour tous vos futurs projets. C'est ce que nous appellons un environnement de travail CSS.

• Un framework CSS n'a pas besoin d'être compliqué ou de tout prendre en charge. Il peut ne contenir qu'un simple jeu de feuilles de style CSS tel que :

  • typography.css pour les règles typographiques de base,
  • grid.css pour la mise en page par grille ou
  • layout.css pour des maquette générales,
  • form.css pour des styles de formulaires basiques,
  • general.css pour tout autre style supplémentaire.

• et ainsi de suite… Vous pouvez aller plus loin dans la segmentation de votre code, par exemple : structure, typographie, présentation, sections spécifiques (menus, navigations), impression, web mobile, contournements spécifiques pour certains navigateurs (via les commentaires conditionnels pour Internet Explorer). Toute la segmentation du code des frameworks CSS les rend généralement pratiques à utiliser, mais peut entrainer une réelle charge serveur supplémentaire à cause du nombre de requêtes http par pages vues [Treading Lightly With CSS Frameworks, par Gary Barber].

• En bref, les frameworks sont un jeu d'outils, de bibliothèques, de conventions et de bonnes pratiques qui tentent deconvertir les tâches répétitives en modules génériques réutilisables. Le but est de permettre au designer ou au développeur de se concentrer sur les tâches propres au projet en cours, plutôt que de l'obliger à réinventer la roue à chaque fois. [Framework For Designers, par Jeff Croft].

• Vous augmentez votre productivité et évitez les erreurs les plus courantes.

Si vous développez de nombreux sites similaires, un code CSS générique peut radicalement améliorer votre productivité, vous aider à éviter les erreurs communes et simplifier la gestion du code CSS.

• Vous normalisez votre code et vos classes.

Vous avez un code CSS et (X)HTML par défaut, ce qui vous permet d'utiliser les mêmes identifiants et noms de classes dans vos projets. Cette permanence du code à travers l'ensemble de vos projets rend vos sites web plus faciles à maintenir sans avoir à vous replonger dans le code source pour savoir comment il fonctionne.

• Vous avez un meilleur flux de production au sein de l'équipe.

Si le framework CSS est bien documenté, il peut être utilisé dans l'équipe comme base de travail commune, évitant ainsi les incompréhensions tout en optimisant les flux de production. Par ailleurs, en évitant les erreurs, vous vous donnez les moyens de rendre votre travail dans les temps sans sacrifier à la qualité et sans coût supplémentaire.

• Vous optimisez la compatibilité entre les différents navigateurs.

Si votre frameworks CSS est à l'épreuve des balles, vous n'avez pas à vous soucier d'éventuels problèmes de compatibilité avec les navigateurs présents sur le marché. Vous pouvez commencer à coder droit devant !

• Vous avez un code finalisé, propre et bien structuré.

Les frameworks CSS fournissent des fondations bien pensées pour vos sites ; en les utilisant vous avez un style de base pour tous vos éléments HTML. N'avez-vous jamais oublié l'élément code ou abbr ? CQFD.

• Vous aurez besoin de temps pour comprendre le framework.

Pour l'utilisateur moyen, […] le temps requis pour comprendre l'architecture d'un framework l'emporte de loin sur les menus tâches nécesssaires pour partir de rien. [Why I don't use frameworks]

• Vous devrez avoir une connaissance approfondie de l'architecture de votre code.

En utilisant un framework CSS externe, vous ne serez pas dispensé d'une profonde connaissance de votre code. Vous devrez savoir exactement comment fonctionne votre environnement de travail. En construisant un site depuis les fondations, vous bénéficiez d'une bonne connaissance de l'architecture de votre site que vous ne pouvez pas apprendre par l'étude ou la documentation. [Why I don't use frameworks]

• Vous héritez des bugs ou des erreurs de quelqu'un d'autre.

Si vous utilisez un framework CSS, vous pouvez être amené à corriger les bugs du concepteur du framework en question, ce qui est toujours plus chronophage que de régler ses propres erreurs.

• Vous développez des sites grâce au framework et non pas d'après une solide connnaissance des CSS.

Un des grands problèmes posés par les frameworks, c'est que les développeurs finissent par s'attacher au framework lui-même au lieu du code qu'il y a derrière. La connaissance qui en résulte n'est pas réutilisable, ce qui limite fortement les compétences du développeur. [Please Do Not Use CSS Frameworks, par Jonathan Christopher].

• Vous avez du code inutile.

Qu'il s'agisse des frameworks pour les langages côté serveur ou des bibliothèques JavaScript, souvent, une grande partie du code n'est pas utilisée. Si ce n'est pas un souci majeur côté serveur, ceci peut dégrader fortement les performances quand il s'agit d'un framework qui agit côté client. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]

• Les CSS peuvent ne pas être sémantiquement correctes.

CSS et (X)HTML travaillent main dans la main. (X)HTML est un langage sémantique par nature qu'il est impossible d'englober dans un framework. Chaque projet est unique et entraine une structure de document unique en terme de classes ou d'identifiants. Les frameworks CSS suppriment la grande majorité des valeurs sémantiques dans le document, et à mon avis, ne devraient pas être utilisés. [Please Do Not Use CSS Frameworks, par Jonathan Christopher]

• Ignore les spécificités de vos projets web.

Le design devrait être basé sur le contenu et non sur un template standardisé réutilisable à volonté.

V-A. YAML (Yet Another Multicolumn Layout)▲

Yet Another Multicolumn Layout

Le framework (X)HTML/CSS de Dirk Jesse offre toute la panoplie de templates par défaut pour un nombre considérable de projets web du plus simple au plus complexe. YAML est basé sur les standards web et s'accomode de tous les navigateurs web modernes. Tous les bugs de rendu d'Internet Explorer ont été éliminés. YAML est totalement compatible avec toutes les versions d'IE, de la version 5.x/Win à la version 7.0.

A côté des différents templates conformes aux standards, ce framework offre également une feuille de style pour le débuggage, une pour l'impression, ainsi que des outils aussi robustes que variés pour faciliter le développement web avec YAML. Tous les composants CSS du framework ainsi que les différentes méthodes de mise en page sont parfaitement documentés (en Anglais et en Allemand) et agrémentés de nombreux exemples.

Vous avez aussi la possibilité d'utiliser l'interface visuelle YAML Builder pour créer vos maquettes en WYSIWYG dans votre navigateur web. Vous pouvez choisir le Doctype, les éléments de base de votre maquette (#header, #footer, …), le nombre de colonnes et l'ordre dans lequel vous voulez les voir apparaître dans le code ainsi que leurs largeurs. Le glissé-déposé est possible pour imbriquer à la fois des sous-templates et du contenu factice. Le framework offre la possibilité d'afficher le code complet (marquage XHTML et CSS) et de passer du mode brouillon à la prévisualisation de la maquette finale et vice-versa.

V-B. Blueprint▲

Le framework Blueprint, créé par l'étudiant norvégien Olav Frihagen Bjørkøy, semble trèsprometteur. Ce framework propose :

• des fondations solides pour la typographie ;
• une grille de mise en page facilement personnalisable ;
• une gestion pratique de la typographie et des lignes de base pour le texte ;
• une feuille de style pour l'impression. Il utilise notamment des tailles de caractère relatives, un Reset CSS et est supposé ne pas contenir de code inutile. Ce dernier point n'est pas toujours vrai.

Par ailleurs, vous pouvez utiliser le générateur de grille CSS Blueprint pour obtenir des versions plus souples des templates inclus au départ. Que vous ayez besoin de 8, 10, 16 ou 24 colonnes pour votre design, ce générateur autorise désormais plus de flexibilité dans l'utilisation de Blueprint que l'on peut considérer comme le nouveau standard à venir dans l'approche du design web basé sur une grille de mise en page.

V-C. Yahoo! UI Library CSS Foundation▲

Yahoo! UI Library propose un jeu de fichier CSS faisant office de framework. Le noyau YUI CSS inclut notamment : Reset CSS, Base CSS, Fonts CSS et Grids CSS.

Alors que le Reset CSS supprime et neutralise les différences d'affichage des éléments HTML, Base CSS sert de fondation pour un affichage cohérent des éléments HTML sur les navigateurs modernes.

Fonts CSS normalise et permet de contrôler la typographie sans se soucier du rendu entre les navigateurs; le framework fournit des tailles de caractères et des hauteurs de ligne cohérents et permet à l'utilisateur d'ajuster la taille des polices en gardant une consistance d'un navigateur à l'autre. Il fonctionne à la fois en Quirks Mode et Standards Mode.

Grids CSS fournit une sélection de quatre largeurs de page et six modèles prédéfinis avec la possibilité d'empiler ou d'imbriquer des zones subdivisées en deux, trois ou quatre colonnes. Le fichier de 4 kb propose des combinaisons de plus de 1000 maquettes différentes. Le framework autorise la modification de la largeur pour les pages de largeur fixe ; il permet également de gérer les maquettes avec des largeurs exprimées en pourcentage (100%) aussi bien que les largeurs les plus courantes comme 750px, 950px et 974px, tout en permettant de modifier ces chiffres. YUI offre aussi YUI Grids Builder, une interface simple pour personnaliser ses grilles de mise en page.

Vous devez savoir que ces frameworks sont souvent critiqués : leur code est truffé de code inutile et leur marquage est peu sémantique ; par ailleurs, ils génèrent trop de classes, d'ID et de div faisant office de containers pas toujours nécessaires. A noter que Yahoo! UI Library est livré avec une documentation détaillée accompagnée de nombreux exemple, tutoriels, pense-bête (cheat sheet), modèles et outils.

V-D. Reset Global CSS▲

• Le Reset global est nécessaire pour donner à votre site web une allure plus ou moins identique quelque soit le navigateur utilisé. Par défaut, les navigateurs utilisent différentes valeurs de margin, de padding ou de line-height. Le Reset Global assure que tous les navigateurs (du moins, la plupart) afficheront le site de manière identique.

• {margin:0;padding:0} est une mauvaise pratique.

Malheureusement, ce n'est pas une bonne pratique. C'est très difficile pour les agents utilisateurs d'appliquer ces règles pour chaque élément présent dans le document, surtout si ce dernier est très long. Cette pratique peut aussi supprimer de nombreux styles par défaut qui ont leur raison d'être, en particulier quand vous voulez garder les styles par défaut des boutons submit. [CSS Techniques I Use All The Time par Christian Montoya]

• Tripoli

Tripoli est un standard CSS générique pour le rendu HTML. En se substituant à la feuille de style par défaut des navigateurs, Tripoli forme une fondation stable pour vos projets web pour uniformiser le rendu entre les navigateurs. Un jeu de fichiers CSS est censé vous donner des fondations solides pour vos designs CSS. Toutes les valeurs par défaut, incluant des douzaines d'éléments (tables, listes, typographie, mais aussi les en-têtes (h1 - h6), les abréviations, les citations, et les formulaires ont été pris en compte pour leur donner une lisibilité optimale et assurer aux textes une présentation bien structurée.

• Reset CSS Reloaded d'Eric Meyer.

Une remise à zéro qui ne serait pas basée sur le sélecteur universel. Comme Eric Meyer le dit," Les styles devraient lister tous les éléments candidats à la neutralisation et les remettre à zéro exactement comme ils devraient l'être, chacun selon leur nature."

• Reset CSS de Yahoo! UI Library

Les fichiers compris dans YUI Reset CSS suppriment et neutralisent le rendu des éléments HTML qui manquent de consistance d'un navigateur à l'autre, en créant un terrain de jeu réservé aux navigateurs modernes et en fournissant des bases à partir desquels vous pourrez déclarer explicitement vos intentions.

• CSS Global Styles Reset par Kyle Neath.

Un simple Reset CSS accompagné de classes additionnelles pour améliorer le débuggage.

• CSS Global Reset par Christian Montoya - cssL'idéal est d'avoir une liste complète des réglages par défaut à appliquer dès le départ pour pallier les insuffisances de chaque navigateur.

• CSS Global Reset par Mike Rundle.

• Master Stylesheet

Cette feuille de style par défaut prend quelques règles typographiques en considération, comme l'espacement entre les niveaux de titres, les paragraphes et blocs de citation (blockquote).

V-E. Styles de base CSS▲

Gardez à votre framework CSS un degré d'abstraction aussi élevé que possible. Habituellement le Reset Global et le formatage de base sont un compromis judicieux qui vous donnera un bon point de départ sans pour autant vous lier à la structure rigide d'un framework.

En développant vos propres styles par défaut, pensez à réduire au maximum le nombre de classes, d'identifiants et d'éléments HTML ; garder à l'esprit l'importance de la signification sémantique des classes que vous utilisez.

Des idées ? Faites-le nous savoir, et partager vos connaissances dans les commentaires !

Article original écrit parSven Lennartz et Vitaly Friedmande Smashing Magazine.

Fondé en septembre 2006, Smashing Magazine fournit des informations utiles aux webdesigners et aux développeurs. Notre but est d'informer nos lecteurs sur les dernières tendances et techniques dans le monde du développement web, de manière claire, précise et régulière. Nous n'essayons pas de vous convaincre avec la quantité, mais en vous présentant des informations de qualité. C'est ce qui nous rend différent. En fait, nous frappons vos esprit avec l'information qui vous rendra la vie plus facile. Vraiment.

Notes sur la traduction. J'ai essayé de suivre au mieux les intentions de l'auteur et le déroulement de l'article, mise en forme comprise afin de permettre une comparaison rapide avec l'original en cas de doute sur la pertinence de tel ou tel parti pris dans la traduction.

Les frameworks CSS ont le vent en poupe et c'est globalement mérité. Toutefois, si de nombreux arguments militent en leur faveur, ils ne sont pas dépourvus de défauts. En ce qui me concerne, je leur trouve une utilité pédagogique certaine : en les étudiant, on se fait une idée des bonnes pratiques en matière d'organisation des CSS. Pour ce qui est de les utiliser en production, je distingue deux types d'utilisation :

1. Vous savez ce que vous voulez comme structure HTML en terme d'éléments et de colonnes pour adapter les éléments graphiques en conséquence. Pas de souci particulier, dans ce cas de figure les frameworks CSS vous feront gagner beaucoup de temps.
2. Vous commencez par créer votre mise en page pour la découper ensuite en créant uniquement les éléments HTML dont vous avez besoin. Là, l'utilisation des frameworks est déjà moins évidente et vous risquez de passer beaucoup de temps à caler les éléments entre eux.

Après, c'est comme beaucoup de choses, j'imagine qu'avec de la motivation et de l'huile de coude on finit par maitriser le framework et faire face à tous les cas de figure en matière d'intégration CSS.

Finalement, et je trouve celà assez amusant, si le framework est la suite logique du Reset CSS, la suite logique du framework existe déjà depuis longtemps : c'est Dreamweaver avec le respect des standards en plus et la possibilité de gérer le multi-colonnage, pied de page compris…

Stay tuned and mind the gap!

• Votre palette de couleurs avec Color Palette Generator
• Votre blog sur un téléphone portable, really ready ?
• Variables CSS, templates CSS, Pluxml et Have fun with CSS
• Twitter : Signal social, microblogging et moblogging
• Templates et boutique en ligne osCSS

Tous mes remerciements à eric190 pour sa relecture.