Les fichiers CSS sont indispensables pour la création d’une application web ou d’un site internet. Nous verrons dans cet article comment écrire notre CSS pour faciliter sa lecture par n’importe quel membre de l’équipe de développement et l’optimiser afin qu’il n’impacte pas les performances.
Le CSS (Cascading Style Sheets) est un langage de programmation né en 1996 destiné à la mise en forme des pages internet au format HTML ou XML d’un site web ou d’une application web ou mobile.
On parle alors de feuille de style.
Son utilité principale est de faciliter la lecture du visiteur par des mises en page graphique en proposant une disposition des blocs de contenu intuitive, l’intégration des couleurs et polices…
Bien utilisé, le style devient un levier incontournable pour l’optimisation de l’expérience utilisateur.
Sans fichiers CSS, le site ne posséderait aucun style. Il ne serait pas intuitif et agréable à parcourir pour l’utilisateur et il serait impossible de distinguer un site d’un autre du premier coup d’œil.
Pour styler un contenu, l’intégrateur s’appuie sur des sélecteurs :
- Éléments HTML : On retrouve entre autres les balises Header, Footer, Body, les niveaux de titre (h1, h2, h3…) et bien d’autres.
- Classes et Id : Les Classes et Id sont ajoutés aux balises HTML via un attribut class ou id. Leurs propriétés sont ensuite définies dans des fichiers CSS.
- Attributs Style : Les attributs Style permettent de styler rapidement un composant HTML, cependant il est plus correct d’utiliser l’attribut Class notamment pour limiter la duplication du code et faciliter la lecture de l’HTML.
- Intégrateur
-
Aussi appelé développeur front, l’intégrateur est chargé de mettre en forme les pages d’un site internet à l’aide d’un style guide et de maquettes. Pour ce faire, il utilise du CSS et peut avoir recours au Javascript pour les rendre dynamiques.
Nous cherchons toujours à optimiser la vitesse d’affichage de vos sites internet.
Les fichiers CSS peuvent être améliorés de plusieurs façons :
- Dans la manière d’écrire le CSS
- Dans la compilation des fichiers
Plus un fichier CSS est long, plus il est lourd et donc plus il mettra de temps à être chargé et appliqué sur les pages web.
Un site lent au chargement sera néfaste pour l’expérience utilisateur ainsi que pour le référencement.
Il faut donc tout faire pour limiter le poids de ces fichiers et accélérer la vitesse de chargement de notre site.
En rédigeant notre code de manière clair, notre code sera lu et compris rapidement.
Parce que nous ne travaillions jamais seuls sur un site, nous devons toujours nous assurer que les autres développeurs puissent lire facilement le code.
Cette attention à la propreté et la clarté de notre code permettra également de limiter le risque d’erreur et de doublon et permettra de réduire le temps de développement.
Le nommage des classes jouera un rôle important pour faciliter la compréhension du code et son incidence.
Pour mettre en place le design d’un site, nous devons mettre en place des sélecteurs simples et pouvons utiliser l’imbrication des classes (CSS nesting). Attention cependant à limiter la profondeur de nos imbrications au risque de se perdre dans le code.
Pour rédiger notre CSS plus rapidement, nous pouvons avoir recours à des pseudo-classes et pseudo-éléments.
Nous concevons également un fichier de variables qui seront utilisées sur les différents fichiers de style.
Nous limitons ainsi les répétitions et mettons à disposition une base claire commune à tous les fichiers css pour les autres développeurs amenés à intervenir sur le projet.
Ce fichier de variables contient généralement les couleurs, taille de texte, breakpoints (média queries)…
Il existe 2 méthodologies d’écriture des classes: BEM et SMACSS.
La première est la plus répandue.
On peut traduire BEM en « Bloc », « Element », Modificateur ».
Si nous prenons un exemple concret d’un composant menu, le bloc indique le contenu principal (le menu), l’élément désigne un lien de ce menu, et le modificateur sera l’élément de l’apparence qui sera modifié.
Le bloc et l’élément doivent être séparés par un double underscore et le modificateur par deux tirets.
Si nous suivons notre exemple, cela donnerait : menu__link menu__link–primary
La méthode SMACSS est organisée sur plusieurs fichiers CSS séparés en cinq catégories: base, mise en page, module, état, thème.
Si nous reprenons l’exemple précédent, nous aurions une classe menu-link dans un fichier menu.css, et une seconde classe is-primary provenant d’un fichier colors.css.
Le résultat final serait donc : menu-item is-primary
L’intérêt de séparer ces classes sur plusieurs fichiers CSS et d’utiliser un nommage plus global est de limiter la création de nouvelles classes en utilisant des classes génériques.
L’utilisation de framework simplifie considérablement la rédaction du CSS notamment s’il inclut des classes dites prêtes à l’emploi.
Chez Imagile nous utilisons le framework TailwindCSS qui présente de nombreux avantages :
- Gain de temps : Tailwind propose une bibliothèque complète de classes utilitaires prêtes à l’emploi, accélérant la création d’interfaces sans réécrire des styles de base. Ces classes sont directement intégrées dans les fichiers HTML, cela s’appelle l’utility first.
- Meilleure lisibilité : Les classes sont explicites et décrivent directement l’apparence visuelle d’un élément.
- Constance du design : En utilisant un système de design configurable (couleurs, espacements, typographies), il garantit l’homogénéité sur tout le projet.
- Maintenance facilitée : Nous limitons le CSS personnalisé à maintenir.
- Optimisation automatique : Tailwind utilise Lightning CSS pour purger le CSS inutilisé en production, réduisant ainsi la taille des fichiers.
De la même manière que le système Lightning CSS, Purge CSS scanne tous les fichiers HTML, JS, JSX, Vue, etc, à la recherche des classes CSS utilisés. Il compare ensuite avec le fichier CSS global et retirera les classes inutilisées pour ne garder que ce qui est utilisé.
Nous pouvons mettre en place des préprocesseurs (SASS, LESS PostCSS…) pour faciliter l’écriture du CSS.
Ces systèmes intègrent généralement l’imbrication des classes, la configuration de variables et du code réutilisable (mixins).
Il formatera ensuite ces fichiers en un seul fichier en CSS simple (non imbriqué) que le navigateur sera en mesure de lire.
De la même manière qu’avec un framework CSS, nous accélérons le processus d’écriture du style et garantissons un affichage rapide du site.
Si votre projet contient plusieurs fichiers CSS, le serveur fera des requêtes pour chaque fichier de style. Pour limiter ce nombre de requêtes, nous rationalisons ces fichiers en un seul et même fichier compilé.
Nous utilisons ensuite un système de minification et de compression qui supprimera les espaces, retours à la ligne et commentaires pour alléger au maximum la taille du fichier final.
Un CSS bien structuré, lisible et optimisé améliore à la fois la rapidité de développement, la collaboration entre développeurs et les performances du site. En combinant bonnes pratiques et outils modernes, nous gagnons en efficacité et en qualité.
Et si la prochaine étape consistait à automatiser encore davantage votre workflow CSS notamment grâce aux outils IA ?
