Grands principes de construction moderne de CSS

Openweb.eu.org > Articles  > Grands principes de construction moderne de CSS

Abstract

Nous l’avons souvent abordé, soutenu, défendu : le développement front-end et notamment de CSS est une pièce centrale des sites web et même du Web, et ce phénomène s’accentue de plus en plus, notamment avec les sites en responsive.

Nicolas Hoffmann vous propose à cet effet une série de pas moins de dix articles sur les approches et contraintes modernes qui touchent CSS.

Article

La production de CSS est un domaine qui a beaucoup évolué. De dernière roue du carrosse, ce poste s’est mué en poste central des sites Web, exigeant d’énormes compétences évoluant très vite. Nous avons déjà abordé ces changements dans plusieurs articles comme « De l’intégrateur au développeur front-end : un maillon essentiel de la qualité Web » ou « CSS, l’âge de raison » et via de nombreuses ressources.

Si l’on schématise, produire de la CSS il y a 10 ans se bornait à obtenir un « ça marche ». Peu importaient les performances, la maintenabilité, la propreté du code ou l’utilisation non-sensique du langage, etc. : tant que cela marchait, aller plus loin ou faire mieux n’était malheureusement pas dans les objectifs. Au mieux quelques bonnes pratiques émaillaient le domaine, au pire, les CSS étaient d’immenses tas de ruines en joyeux désordre.

Maintenant, produire des CSS est devenu un sport de haut vol, le « ça marche » est devenu « il faut que cela marche bien ».

Performance, maintenabilité, évolutivité, extensibilité, propreté, modularité, capacité à fonctionner en responsive, etc. ne sont plus des concepts idéalistes, ce sont devenu des objectifs tangibles et même des pré-requis.

Une métaphore que vous pouvez garder à l’esprit tout au long de cette série d’articles : les CSS sont à considérer comme des Formules 1. Même si la performance et bien sûr la vitesse sont les premières idées à laquelle on pense avec une telle métaphore, il faut plutôt comprendre l’idée de la Formule 1 comme « produit de haute technologie ».

Les CSS doivent être hyper-performantes, réglées à un grand niveau de précision tout en ayant une immense souplesse, permettre souvent des contraintes qui sont hors de leur champ direct d’application, et le tout se dégradant correctement sur des navigateurs plus anciens (pour ne citer que quelques exemples).

Globalement, elles ne sont plus des produits de « bricoleurs du dimanche » ou de « stagiaires à qui on ne sait pas quoi donner » mais bien des produits d’experts ayant des connaissances pointues : des produits high-tech en somme.

Objectifs de cette série d’articles

Le but est d’aborder de manière pragmatique tous les concepts qui sont nécessaires à la production moderne de CSS. Ces concepts sont autant des principes de base bien connus que des contraintes propres aux sites internet (comme la performance), ainsi que des contraintes de pure production et/ou organisationnelles.

Même si ces articles utiliseront des exemples pour illustrer ces concepts, l’objectif est bien de comprendre avant tout les approches et les manières de penser les feuilles de style. Un point important : ces articles auront leur existence séparée mais seront à considérer de manière globale, comme un tout cohérent.

Voici les articles qui seront publiés au fur et à mesure (les titres peuvent évoluer) :

  1. Les principes de base en CSS
  2. L’orthogonalité en CSS
  3. Prendre des conventions en CSS et les documenter
  4. Les performances vues des CSS
  5. « Penser en dehors de la boîte » (think outside of the box en anglais)
  6. L’approche DRY : don’t repeat yourself
  7. « N’y revenez pas ! »
  8. Des approches en vogue confrontées aux principes
  9. Considérations plus globales et conclusion

À propos de cet article

Vos commentaires

  • Ysabeau Le 24 avril 2014 à 13:39

    Merci d’avance pour cette série.

  • Nicolas Hoffmann Le 1er mai 2014 à 21:25

    De rien, j’espère sincèrement que cela vous intéressera. :)

  • Ysabeau Le 8 mai 2014 à 20:49

    Oh oui ça m’intéresse !
    C’est bien vu et bien rédigé. Grand merci.

  • Frédéric Ferri Le 16 juillet 2015 à 12:14

    Très belle initiative, merci à vous pour ce travail !

Vos commentaires

modération a priori

Attention, votre message n’apparaîtra qu’après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <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