Architecture

Assurer une bonne maintenance et scalabilité de son design passe par une bonne organisation de la base de code. Le CSS est particulièrement concerné et cela peut vite devenir compliqué de maintenir son interface sans régressions.

ITCSS

Architecture imaginée et partagée par Harry Roberts. ITCSS organise l’ordre d’inclusion des feuilles de styles. ITCSS = Inverted Triangle CSS. L’inclusion des règles de styles est réalisée par spécificités :

• moins forte -> plus forte
• générique -> explicite

Cela à plusieurs avantages, le premier étant la séparation des styles de structure et des styles de forme avec la pratique de l’Oriented Object CSS (OOCSS). Second avantage, maitrise de la cascade CSS avec minimisation des surcharges. On peut parler de surcharge maitrisée grâce à un ordre d’inclusion des styles bien spécifique :

• Settings
• Tools
• Generic
• Elements
• Objects
• Components
• Utilities

Settings & Tools :
Avec un pré-processeur comme Sass, il est possible de profiter de variables, fonctions et mixins qui forment notre boite à outils. Ces éléments servent à la compilation du code en CSS.

Generic :
Dossier où se retrouvent les styles de cohérence cross-browser. On y inclu les normalize.css et autre reset permettant d'annuler les styles par défaut des navigateurs. On y met également les styles partagés sur tous où un groupe d'éléments HTML, comme le box-sizing par exemple.

Élements :
On retrouve ici les styles spécifiques à certains de nos éléments HTML. Les styles titres, images, ou encore à l'élément HTML par exemple.

Objects :
Styles concernant nos objets CSS. Les objets CSS représentent des styles de structure pouvant être utilisés sur tous nos éléments/composants. Dépourvus d'esthétique, ils servent à gérer le positionnement/comportement de nos élements. Par exemple un objet wrapper utilisé pour piloter le comportement d'une boite dans laquelle nous viendrions mettre du contenu (paddings, max-width…).

Components :
Styles spécifiques à nos composants UI. La plupart de notre design et de notre travail se trouvera ici. Exemple : un composant button avec son UI bien spécifique.

Utilities :
Classes utilitaires de styles spécifique. Ce sont de véritable Helpers qui nous permettent d'appliquer des styles sur des éléments autre que des composants et de surcharger n'importe quel style existant. Pratique pour compléter les objets.

Ressources

• Speaker Deck "Managing CSS Projects with ITCSS" - Harry Roberts
• Conférence "Managing CSS Projects with ITCSS" - Harry Roberts
• Article "ITCSS: scalable and maintainable CSS architecture" - Lubos Kmetko