Frameworks CSS: Conclusion

Le dossier sur les frameworks CSS touche à sa fin (ouf!). Après avoir présenté le concept de grid CSS, les tests des frameworks BluePrint, Yahoo YUI et YAML, vont nous permettrent maintenant de conclure, et de répondre aux questions initiales

  • A quoi servent les frameworks? Quels sont leurs domaines d’application?
  • Faut-il les utiliser? pour quel usage?
  • Lequel utiliser?

Quelques commentaires généraux

Structure

Les frameworks sont tous structurés de la même façon. Ils contiennent:

  • des styles de Reset, qui évite les perturbations liées aux valeurs par défaut prises par les navigateurs,
  • des styles de Grille, pour décrire la page elle-même,
  • des styles de Typographie, pour définir la taille des caractères, les interlignes, globalement le rythme vertical de la page,
  • des styles de compatibilité, qui tiennent compte des particularités des différents navigateurs.

Ces quatres familles de styles sont plus ou moins liées les unes aux autres. Les trois derniers dépendent des styles de reset, et les styles de grille et de typographie sont souvent associés.

Les styles de grilles peuvent être divisés en deux catégories:

  • Les blocs de positionnement, qui permettent de construire la structure de la page: entête, pied de page, 2 ou 3 colonnes …
  • Les blocs de contenu, qui définissent la zone d’accueil du contenu dans la structure, en définissant par exemple les espacements.

Apprentissage / Utilisation

Les frameworks ne sont, ni plus ni moins, que des feuilles de styles, et leur apprentissage ne dépasse pas quelques heures, même avec YAML qui le plus complexe des trois frameworks testés. Pour ces raisons, et contrairement à la plupart des frameworks traditionnels, il n’y a aucun danger « d’enfermement ». Nous pouvons changer à tout moment de système sans conséquences lourdes.

Les frameworks font gagner un temps considérable à ceux dont le HTML/CSS n’est pas le métier. Ils soulagent efficacement le développeur de toutes les subtilités CSS liées aux positionnements, et à la gestion des compatibilités avec les navigateurs. Les développements obtenus sont en général robustes et structurés. Par contre, le résultat est parfois un peu plus lourd que dans un développement classique: les frameworks obligent à ajouter des balises div supplémentaires.

Pour moi, les trois frameworks testés

  • s’appliquent à 90% des layouts,
  • permettent de construire rapidement des canevas, des structures de site (ne cherchez pas à aller au delà),
  • en respectant les règles des designs (rythmes horizontaux et verticaux, typographie),
  • en étant compatibles avec la majorité des navigateurs.

Les deux derniers points me semblent importants pour des non professionnels du Web Design, car ils font gagner un temps énorme, mais nous y reviendrons.

Comparatif

Le tableau ci-dessous reprend les avantages et inconvénients évoqués dans les articles précédents:

Avantages Inconvénients
BluePrint – Simplicité,
– Rapidité d’apprentissage
– Documentation inexistante,
– Souplesse de personnalisation.
Yahoo YUI – Bien documenté
– Facilement modifiable
– Dimensionnement proportionnel
– Noms des styles un peu ésothériques,
– Imbrication répétitive de blocs dans certains cas,
– Module typographique.
YAML – Très complet,
– Librairie de composants pour des menus et des listes,
– Personnalisation
– Plus complexe à aborder,
– Modification des styles,
– Plus grande sensibilité aux navigateurs,
– Type de license.

Commentaires et Conclusions

Les réponses aux questions posées en introduction dépendent forcement de l’utilisateur, et de ses compétences. Il est également difficile d’y répondre séparement.

Pour moi, les principales valeurs ajoutées des frameworks sont:

  1. La rapidité de construction de la page: en partant de la grille papier, il ne faut que quelques minutes pour construire la structure de la page,
  2. La compatibilité avec les navigateurs,
  3. Une structuration du code,
  4. Les règles typographiques, les rythmes verticaux et horizontaux sont mieux respectés.

Ces points sont plus ou moins vrais en fonction des utilisateurs. Ma conclusion va donc se baser sur un classement des développeurs en quatre catégories principales, en fonction de leurs connaissances en HTML/CSS:

Utilisateur Débutant Amateur Professionnel
Connaissances HTML/CSS Aucune Faible Maîtrise HTML et croit connaître CSS Compétence forte dans les deux « langages »
Pratique Nombreux layouts écrits avec Word, FrontPage ou DreamWeaver 1 ou 2 layouts faits « à la main » construction régulière de layout pour lui, des amis, des associations… construction quotidienne de site pour des entreprises

Commençons par le plus simple: les frameworks CSS nécessitent un minimum de connaissance en HTML / CSS: ils ne s’adressent donc pas à la catégorie des utilisateurs, qui devront d’abord devenir développeurs débutants.

Pour les professionnels, je pense que les frameworks peuvent être utiles, mais ne s’imposent pas. En général, ces développeurs utilisent des méthodologies éprouvées, et ont des connaissances qui leur évitent de se reposer les mêmes questions à chaque projet. L’utilisation d’un framework peut se justifier dans un besoin éventuel de standardisation du code, ou d’intégration avec d’autres librairies (je pense aux librairies Javascript de Yahoo YUI notamment). Ils peuvent également servir de base pour la conception d’un framework personnel.

Les frameworks se révèlent réellement très efficaces, pour les débutants ou les amateurs. Ils permettent en effet, de contourner certains lacunes, et d’obtenir des résultats très rapidement. Mais surtout, les frameworks apportent une méthodologie de développement plus rigoureuse, et un meilleur respect des règles de design. De ce point de vue, je considère les frameworks comme d’excellents outils d’apprentissage. Le code HTML / CSS généré en lui-même n’est pas très important, il n’est constitué que de quelques dizaines de lignes. Par contre, il est extrêmement instructif de le décortiquer et de le comprendre.

Personnellement, je m’auto-classe dans la catégorie « amateur »: je n’ai pas beaucoup de sites à mon actif (et certains datent franchement), mais j’ai quelques connaissances CSS. Cette étude m’a clairement fait progresser.

Quel framework choisir?

Personnellement, je choisis Yahoo YUI, car il offre un bon compromis entre fonctionnalité et simplicité. Il est agréable à utiliser, et les résultats sont sans surprise. BluePrint, malgré d’excellents styles de typographie, me semble un peu limité. Les styles de positionnement ne sont pas proportionnels, ce qui peut poser quelques soucis. YAML est très complet, et pousse plus loin le concept de design variable de Yahoo YUI. Il est cependant plus complexe, et parfois plus contraignant.

Avec un peu d’expérience, je pense qu’il serait relativement facile de se construire son propre système, en mélangeant les bonnes idées de chacun des frameworks étudiés.

J’espère que ce dossier vous sera utile, et je reste intéressé par vos retours d’expérience sur ce sujet.

Autres articles de cette série

  1. Un framework CSS hybride (9 juillet 2008)
  2. Test du Framework CSS 960 Kit (3 juillet 2008)
  3. Frameworks CSS: Conclusion (28 juin 2008)
  4. Framework CSS: test de YAML (23 juin 2008)
  5. FrameWork CSS: Tests de BluePrint v2 (18 mai 2008)
  6. Test du framework CSS Yahoo YUI (17 mai 2008)
  7. GridFox: aide au développement sous Firefox (11 mai 2008)
  8. Test du framework CSS BluePrint (19 avril 2008)
  9. Les frameworks CSS (14 avril 2008)

2 thoughts on “Frameworks CSS: Conclusion”

  1. Ce comparatif commence un peu a dater, et surtout, je l’ai écrit sans avoir une grosse expérience sur le sujet.
    Le comparatif suivant donne une très synthétique de ce qui existe aujourd’hui.

    J’ai refais des tests rescemment avec 960CS et BluePrint, et je reste sur mon opinion. Dans l’ordre, j’utiliserais Yahoo YUI, BluePrint et 960CS. Les deux derniers sont très efficaces, et permettent de construire des designs extrêmement rapidement, mais ils ont quelques inconvénients comme le fait d’exprimer les mesures en px seulement.

  2. Comparatif instructif, merci. J’ai attaqué YAML hier soir mais rien que la lourdeur de la documentation m’a démotivé, je vais essayer de ce pas le framework de Yahoo.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *