Plus le projet CSS prend de l'ampleur, plus il est important de créer une structure évolutive et surtout claire. Comme il existe de nombreuses approches différentes de ce problème dans l'environnement CSS, nous souhaitons nous pencher dans cet article sur ITCSS de Harry Roberts.
Qu'est-ce que ITCSS ?
ITCSS est un méta-cadre évolutif pour CSS, qui a été présenté pour la première fois par Harry Roberts. ITCSS signifie "Inverted Triangle CSS", c'est-à-dire "triangle inversé CSS" et se réfère au classement des instructions CSS par ordre croissant en fonction de la spécificité CSS. La spécificité est la valeur d'une instruction CSS et est calculée en additionnant les valeurs de tous les sélecteurs d'une instruction. Par exemple, l'instruction body #content .data img:hover a une spécificité de 122 : #content 100 + .data 10 + :hover 10 + body 1 + img 1. Les différents sélecteurs ont les valeurs suivantes :
- Sélecteur universel * : 0
- Éléments HTML et pseudo-éléments : 1
- Classes, pseudo-classes et attributs : 10
- IDs : 100
- Styles en ligne : 1000
- !important a une spécificité "infinie".
Les deux manières classiques de structurer les CSS sont soit de refléter la structure de la page web (styles pour l'en-tête, puis le contenu, puis le pied de page), soit de les regrouper par thème (tous les styles de formulaires, tous les styles de médias, les blogposts, etc.) Le problème de la spécificité se pose alors : le navigateur doit constamment faire des allers-retours pour pouvoir appliquer la cascade correcte des styles. Le graphique de spécificité qui en résulte ressemble à peu près à ceci :
Afin de minimiser le surplus et les redondances qui en résultent, nous trions grossièrement nos styles en fonction de leur spécificité afin d'obtenir un graphe de spécificité nettement plus propre. "Trier grossièrement" signifie dans ce cas que nous essayons de maintenir un graphe en progression constante, nous pouvons tolérer des variations minimales. Cela signifie que (dans un monde idéal) nous ordonnons d'abord tous les éléments HTML, puis toutes les classes et enfin tous les ID et instructions avec un !important les uns en dessous des autres. Les styles sont donc classés du général au spécifique, du plus étendu au plus local.
Notre graphique devrait maintenant avoir à peu près cette forme :
Avec ITCSS, nous classons nos styles par ordre croissant de spécificité afin d'obtenir un CSS épuré et non redondant.
Structure technique avec ITCSS et Grunt
Maintenant que le fonctionnement d'ITCSS est expliqué, passons à la mise en œuvre technique. LESS et Grunt permettent de mettre en œuvre une solution techniquement propre et claire, que nous allons présenter ici.
Comme le montre la capture d'écran, nous avons créé dans notre exemple les différentes couches ITCSS en tant que répertoires dans le répertoire des modèles. Dans cette structure, nous pouvons maintenant créer des fichiers individuels pour différentes tâches afin d'obtenir une meilleure vue d'ensemble. Dans la capture d'écran, on peut voir par exemple un fichier de style pour les médias, un pour les formulaires et un pour la typographie. L'idée est que tous les fichiers d'un répertoire aient toujours la même spécificité. La meilleure pratique consiste à regrouper tous les fichiers d'un répertoire dans un fichier _all.less et à rassembler ensuite ces fichiers collectifs dans le fichier theme.less. Voici un exemple de structure selon ITCSS :
- Settings : Variables LESS ou SASS. Il serait judicieux ici de répartir par exemple un fichier pour les couleurs, les polices, les dimensions de la grille, etc.
- Outils : Mixins de toutes sortes. Ici, on peut par exemple enregistrer des clearfixes ou des styles qui peuvent être appliqués à plusieurs autres éléments. Remarque : aucun CSS n'est encore généré jusqu'à ce niveau !
- Generic : on trouve ici des styles de base comme un normalize.css, des resets ou un box-sizing. C'est à partir de cette couche que le CSS est effectivement généré.
- Base : éléments HTML simples. Il s'agit ici de fichiers individuels pour les formulaires, les médias (images, vidéos), la typographie ou les tableaux par exemple.
- Objects : les styles basés sur les classes et non pertinents pour le design, comme un système de grille, trouvent leur place ici.
- Components : styles basés sur les classes et pertinents pour le design. On y trouve des menus, des widgets ou d'autres formatages spécifiques au design.
- Trumps : non, cette couche n'a rien à voir avec le président américain. Appelez-la plutôt Overwrites ou Peaks : c'est ici que vous rassemblez tous les ID, les écrasements pour les librairies utilisées ou les instructions qui utilisent !important.
Après avoir structuré nos fichiers de cette manière, nous allons maintenant passer au traitement ultérieur à l'aide de Grunt. Pour cela, plusieurs tâches de base sont nécessaires : clean nettoie nos fichiers compilés précédemment, concat regroupe plusieurs fichiers, less compile nos fichiers LESS en CSS et cssmin minimise le CSS final. Comme nous avons suivi la structure ITCSS, notre CSS devrait maintenant avoir un graphe de spécificité épuré en conséquence.
Remarques générales sur l'utilisation des bibliothèques
Les bibliothèques telles que Twitter Bootstrap ou Zurb Foundation ont entre-temps trouvé leur place dans le développement Web. Il convient toutefois de réfléchir aux composants dont on a réellement besoin et de se demander si, au final, cela vaut la peine d'intégrer la bibliothèque complète. D'après notre expérience, ce n'est généralement pas le cas. Comme il existe dans la plupart des cas des versions LESS ou SASS des bibliothèques, il faut essayer d'intégrer ces versions directement au bon endroit dans l'arborescence ITCSS.
Le mieux est bien sûr d'utiliser des mixins au lieu de styles prêts à l'emploi, dans la mesure où la bibliothèque utilisée en met à disposition. Zurb Foundation, par exemple, propose des mixins pour un grand nombre de ses composants, de sorte que l'on peut les intégrer dans la couche outils et les utiliser ensuite dans la couche correspondante (généralement Objects ou Components) dans ses propres styles.
Un mot sur les Media Queries
Comme les Media Queries écrasent les instructions CSS existantes, il est judicieux de les placer à la fin de chaque fichier CSS. Que l'on travaille avec Progressive Enhancement et min-width ou avec Graceful Degradation et max-width n'a pas d'importance (bien que nous recommandions naturellement Progressive Enhancement). Mais comment intégrer proprement dans ITCSS les Media Queries qui, dans des circonstances normales, sont dispersées dans tout le code source de LESS ?
À l'aide de la tâche de base mqe (Media Query Extractor), nous pouvons extraire toutes les Media Queries de notre CSS dans nos propres fichiers. Nous obtenons ainsi un fichier pour le point de rupture de 768 px, le point de rupture de 992 px, etc. Nous pouvons maintenant assembler ces fichiers supplémentaires via la tâche de base concat dans l'ordre que nous souhaitons (avec les Media Queries à la fin) et obtenir ainsi un fichier CSS dans lequel tous les styles normaux sont d'abord classés par ordre de spécificité, puis toutes les Media Queries sont listées par ordre croissant et également triées conformément à ITCSS. Enfin, tout peut être réduit et intégré comme d'habitude.
Une fois que nos fichiers ont été structurés dans des répertoires conformes à ITCSS, nous pouvons les optimiser à l'aide de Grunt : tous les fichiers sont regroupés et compilés, les Media Queries sont extraites du CSS qui en résulte et enfin, elles sont regroupées et réduites en un fichier CSS final.
Conclusion
Pour créer des feuilles de style performantes et clairement structurées, ITCSS est un outil puissant. ITCSS peut être utilisé sans problème avec d'autres méthodes telles que BEM et est modulable à volonté. En combinaison avec d'autres techniques comme le Progressive Enhancement ou des optimisations comme Critical CSS, on est ainsi en mesure de générer rapidement des feuilles de style performantes et surtout maintenables pour sa propre boutique en ligne ou son site Internet.
Sources :
