Trois étapes indispensables pour créer des CSS évolutives

    Apprenez les notions fondamentales du code CSS pour les projets de site Web importants, des différentes techniques utilisées pour organiser les CSS aux astuces permettant de créer des feuilles de style faciles à tenir à jour et à étendre

    Abonnez-vous à notre blog

    Contrairement aux petits sites Internet plutôt basiques, on s'attend à ce que les sites d'entreprises soient des plateformes dynamiques améliorées sans cesse au fil du temps. Ces sites ne cessent d'évoluer, tant au niveau fonctionnel qu'au niveau du contenu, afin d'offrir une expérience toujours plus interactive et agréable aux visiteurs. Citons par exemple, entre autres, les nouvelles sections de campagne temporaires ou encore les sous-sites adaptés à différents pays ou marchés. Toutefois, lorsque les formats HTML et CSS ne sont pas conçus pour s'y adapter, la mise à jour du projet devient impossible. Ou pire : sur un site Internet, le changement d'un composant entraîne des effets indésirables à une dizaine d'autres endroits. 

    Si vous faites partie d'équipes multidisciplinaires ou travaillez sur des projets longs et en constante évolution, une solution de travail unifiée est indispensable pour garder des feuilles de style de sites Web à jour et faciles à déboguer. Cet article présente trois recommandations à l'intention des développeurs front-end pour créer un code CSS évolutif. Ces trois principes constituent les fondements de la création d'un code qui, loin d'en empêcher le fonctionnement, s'adapte à votre plateforme.

    1. La configuration

    1.1. Les fichiers SASS

    Le meilleur conseil à donner concernant la configuration générale est de suivre l'Inverted Triangle CSS (ITCSS). Cette architecture CSS organise votre code par spécificité pour en simplifier le caractère évolutif et la mise à jour. Vous pouvez regrouper tous les fichiers partiels en un seul fichier maître, qui est également un fichier LisezMoi. La partie la plus complexe de l'ITCSS est de délimiter les composants et les objets. En règle générale, j'applique la directive suivante : la plupart des éléments sont un composant à l'exception de ceux du plus haut niveau qui constituent la structure de la page, comme un système de grille.

    Scalable CSS

    L'ITCSS organise les CSS en fonction de trois paramètres : portée, spécificité et caractère explicite, représentés sous la forme d'un triangle inversé

    1.2. Utilisation d'un cadre CSS

    Vous pouvez envisager d'utiliser un cadre front-end comme Bootstrap lorsque le design, les wireframes et les spécifications de votre site Internet correspondent aux éléments du cadre. Si ce n'est pas le cas, il vaut mieux ne pas en utiliser. Choisissez un cadre en fonction des fonctionnalités dont vous avez vraiment besoin et de la compatibilité du navigateur que vous souhaitez fournir. Un autre facteur à prendre en compte est la courbe d'apprentissage pour les développeurs de votre entreprise : si vos collègues connaissent déjà un cadre en particulier, cela ne sert à rien d'adopter un nouveau cadre juste pour dire que vous tentez quelque chose de différent.

    1.3. Apparence et langues

    Les sites Internet des entreprises prennent souvent en charge beaucoup de langues différentes. Lorsqu'elles utilisent toutes la même police Latin, votre seule préoccupation est de fournir assez d'espace pour les intitulés. Cependant, pour les langues disposant d'un ensemble de caractères alternatif, comme le russe ou le chinois, il est souvent judicieux d'attribuer à chaque site Web un fichier CSS qui lui est propre. À l'aide de SASS, cela peut être réalisé facilement en créant un fichier maître qui charge tous les fichiers partiels, qui restent les mêmes. Ce fichier maître est ensuite inclus dans un fichier apparence qui comprend également des fichiers partiels apparence. 

    Une autre méthode spécialement adaptée aux grands sites Internet consiste à créer des fichiers CSS complémentaires. L'idée générale est de fournir un fichier CSS, contenant la majorité des styles pour le site Internet, comme la typographie générale, le système de grille, la navigation, etc. Les ajouts importants à ce site Internet comme les zones assorties d'un accès limité ou un processus d'inscription étendu nécessiteront généralement un nombre important de CSS additionnels ; ils doivent donc se voir attribuer une feuille de style distincte qui s'appuie sur le fichier CSS principal.

    1.4. Convention de nommage

    Autre paramètre à prendre en compte lors de la configuration : l'utilisation de la convention de nommage des classes CSS « Block, Element, Modifier », qui permet de structurer la CSS. Il est également conseillé d'éviter les noms de classes CSS généraux comme « table » (tableau), car vous intégrerez forcément à un moment ou un autre un code tiers qui utilisera ces noms.

    2. Analyser tout en créant

    Afin d'écrire un code facile à mettre à jour et flexible, Atomic Design est indispensable : définissez quels éléments sont des molécules et mettez-les ensemble pour créer un composant. Les composants peuvent être placés dans d'autres composants ou dans des objets. L'objectif est de créer des modèles de conception qui sont stables et réutilisables à différents endroits, par exemple des éléments de formes qui se retrouvent dans la recherche du site, ainsi que dans le processus d'inscription.

    N'oubliez pas que les composants peuvent se présenter sous plusieurs états : active, empty, error, too many items, etc. Cela a une incidence sur la manière dont vous rassemblez les éléments. Il est donc souvent utile de dessiner un élément complexe à l'aide d'une feuille de papier et d'un crayon. Ainsi, la structure et les états sont clairs depuis le début et cela vous oblige à penser de manière « atomique ».

    3. Documentation et bibliothèque de composants

    Il est important que les membres d'équipe du développement puissent toujours compter sur une bonne documentation et une librairie de composants à jour. Pour les développeurs back-end, le dernier signe d'un système bien conçu est la possibilité de créer de nouveaux composants (simples) sans avoir à créer une seule ligne de CSS, car le code HTML est entièrement réutilisable. 

    Publié sur    Dernière mise à jour le 26/09/2019

    #Développement Web

    À propos de l'auteur

    Wouter Lemoine doubles as Front-end Developer and Functional Analyst at Amplexor, based in Belgium. He specializes in user experience and web-animation. With over 10 years of experience in digital marketing and software development, Wouter has worked on digital platforms and applications across the globe.

    SUBSCRIBE TO OUR BLOG