Introduction à ITCSS pour les développeurs Web

Il y a une poignée de bonnes méthodes pour structurer le code CSS, et elles fonctionnent toutes de différentes manières. Les plus populaires sont OOCSS et SMACSS, mais il existe aussi une méthode moins connue appelée ITCSS (Inverted Triangle CSS) créée par Harry Roberts.

Ce n'est pas une bibliothèque ou un framework, mais une méthodologie d'écriture de code évolutive et facile à manipuler. Les avantages d'ITCSS vont de l' organisation de code simple à des tailles de fichiers plus petites, et une meilleure compréhension de l'architecture CSS.

ITCSS n'est pas pour tout le monde, mais il fournit une manière professionnelle de regarder les feuilles de style avec clarté pendant le processus de codage. Passons en revue les concepts derrière ITCSS, et voyons comment ils peuvent être appliqués aux projets web.

Qu'est-ce que ITCSS?

Les manières modernes d'organiser CSS reviennent souvent à la modularisation ou aux objets CSS pour construire des idées abstraites.

La nouvelle idée de Inverted Triangle CSS est une manière de diviser les propriétés CSS selon leur niveau de spécificité et d'importance . C'est une méthode moins connue comparée à SMACSS et OOCSS - bien que les deux peuvent être combinées avec ITCSS.

Puisque ITCSS est la plupart du temps propriétaire, aucun livre de règles détaillé n'existe au sujet de son utilisation. Seul un ensemble de principes spécifiques est à notre disposition. L'auteur parle d'eux dans la vidéo ci-dessous.

Par défaut, ITCSS utilise les mêmes principes que OOCSS mais avec une plus grande séparation basée sur la spécificité. Donc, si vous êtes déjà familier avec OOCSS, considérez ceci comme une architecture CSS alternative unique à essayer.

Voici quelques-uns des plus grands avantages d'utiliser ITCSS:

• Les objets de page peuvent être divisés en leurs propres fichiers CSS / SCSS pour la réutilisabilité . Il est simple de copier / coller et d'étendre chaque objet dans d'autres projets .
• La profondeur de la spécificité est à vous .
• Il n'y a pas de structure de dossier définie et pas d'utilisation obligatoire d'outils de prétraitement.
• Vous pouvez fusionner des concepts d'autres méthodologies telles que des modules CSS pour créer votre propre flux de travail hybride .

Le système ITCSS

Jetons un coup d'oeil à la façon dont le modèle du triangle inversé fonctionne en utilisant l'illustration suivante de la publication de Lubos Kmetko.

Un flux directionnel depuis le sommet plat du triangle inversé jusqu'à la pointe du bas symbolise une augmentation de la spécificité . Cette focalisation sur moins de spécificité facilite la réutilisation de classes sur un site plusieurs fois.

Chaque sous-section du triangle peut être considérée comme un fichier ou un groupe de fichiers distinct, bien que vous n'ayez pas besoin d'écrire du code de cette manière. Cela a plus de sens pour les utilisateurs de Sass / Less à cause de la fonctionnalité d'importation. Il suffit de penser à chaque sous-section comme une méthode pour diviser et organiser le code CSS réutilisable .

Jetons un coup d'œil à chaque section du triangle inversé en allant du haut vers le bas.

• Paramètres - Variables et méthodes du préprocesseur (aucune sortie CSS réelle)
• Outils - Mixins et fonctions (pas de sortie CSS réelle)
• Generic - réinitialisations CSS qui peuvent inclure la réinitialisation d'Eric Meyer, Normalize.css, ou votre propre lot de code
• Elements - Sélecteurs d'éléments HTML uniques sans classes
• Objets - Classes pour la structure de page suivant généralement la méthodologie OOCSS
• Composants - Classes esthétiques pour styliser tous les éléments de la page (souvent combinés avec la structure des classes d'objets)
• Atouts - Les styles les plus spécifiques pour passer outre toute autre chose dans le triangle

Chaque couche du triangle inversé peut être ajustée en fonction de vos besoins . Donc, si vous n'utilisez pas de préprocesseur CSS, vous n'aurez pas besoin des couches Paramètres ou Outils.

Vous devriez vous sentir libre d'interpréter chaque sous-section comme bon vous semble. Par exemple, Jordan Koschei explique comment il a combiné la structure et l'esthétique dans des classes d'objets, en laissant très peu dans la section Composants.

ITCSS n'a pas de règles strictes que vous devez suivre. Il n'y a pas de vérificateur de conformité ITCSS, et personne ne criera à vous pour avoir légèrement modifié ce modèle.

Bien que le créateur de l'ITCSS, Harry Roberts, ait souhaité garder ses méthodes propriétaires pour un usage interne, vous pouvez trouver un exemple open source d'ITCSS dans ce repo GitHub. Il est hébergé par le compte CSS Wizardry, qui est le site personnel de Harry Roberts.

BEM + IT = Nommage BEMIT

L'un des schémas de dénomination CSS les plus populaires est BEM. Cela signifie Block-Element-Modifier et suit une syntaxe très particulière.

Chaque élément de BEM décrit une convention de dénomination pour les classes CSS:

• Les blocs sont des classes pour des éléments individuels qui peuvent être répliqués et isolés.
• Les éléments font toujours partie d'un bloc
• Les modificateurs modifient toujours un bloc ou un élément pour modifier légèrement son apparence (activé / désactivé, actif / inactif, fixe, statique, surligné / neutre).

BEMIT est la convention de dénomination adoptée par ITCSS, qui emprunte des idées de BEM tout en mettant en application de nouvelles idées avec ITCSS.

La syntaxe BEM impose des règles très spécifiques. Voici un exemple du site Web de BEM:

 .form {} .form - theme-xmas {} .form - simple {} .form__input {} .form__submit {} .form__submit - désactivé {} 

Les blocs ont des noms sans séparation, ou des noms séparés par un tiret ou un trait de soulignement. Les éléments utilisent deux traits de soulignement et ils décrivent des éléments internes cohérents avec ce bloc particulier. Les modificateurs fonctionnent de la même manière mais utilisent deux tirets pour l'identification.

Harry plonge plus profondément dans BEMIT dans ce billet de blog. Sa description est très concise et montre que la véritable nature de l'ITCSS est de jouer amicalement avec d'autres méthodologies CSS .

Harry définit les espaces de noms pour les objets apparaissant comme des préfixes pour chaque nom de classe majeur . Ils se décomposent en o- pour les objets, c- pour les composants et u- pour les utilitaires (comme le clearfix ou le centrage de texte).

Voici un exemple de code représentant des conventions de dénomination BEMIT typiques .

...

Il recommande également d'utiliser le suffixe @ pour les classes basées sur les styles de média. Ainsi, la classe .o-media peut .o-media@lg pour les grands écrans et .o-media@md pour les écrans de taille moyenne.

Personnellement, je pense que les suffixes supplémentaires sont trop compliqués pour les projets web de base . Je pense que la plupart des développeurs préfèreraient utiliser des requêtes médiatiques communes et réécrire les classes à différents points d'arrêt. Mais je ne peux pas dire si les deux méthodes sont bonnes ou mauvaises, et n'importe qui peut décider individuellement s'il veut utiliser BEMIT ou non.

Je vous recommande vivement de lire cet article BEMIT d'introduction pour en savoir plus sur les raisons pour lesquelles ITCSS a étendu BEM, et comment vous pourriez vouloir nommer vos classes CSS.

ITCSS peut être résumé comme une méthode organisationnelle pour l'écriture de CSS réutilisable et évolutive . BEM est la syntaxe de nommage préférée, et BEMIT l' étend pour travailler avec des espaces de noms pour un code plus spécifique et reconnaissable.

Il y a beaucoup à apprendre, et si vous êtes nouveau sur CSS, ce sera un concept difficile à casser. Mais si vous êtes prêt à apprendre, je vous garantis que vous serez surpris par la nature épurée du code ITCSS.

Emballer

Les développeurs frontaux cherchent toujours à optimiser leur flux de travail. ITCSS est juste une autre méthode qui peut contribuer à une méthode améliorée de structuration de sites Web complexes.

La difficulté est d'apprendre comment cela fonctionne dans le vrai travail de projet. Si vous avez la témérité et que vous voulez apprendre, alors ITCSS peut être quelque chose qui vaut la peine d'être ajouté à votre boîte à outils. Même si je n'ai trouvé aucune documentation officielle, il y a encore beaucoup de ressources en ligne pour en savoir plus sur ITCSS.

• Gérer des projets web à grande échelle avec la nouvelle architecture CSS ITCSS (creativebloq.com)
• Gestion de projets CSS avec ITCSS - Diapositives de présentation (speakerdeck.com)
• Projets CSS avec ITCSS (présentation vidéo 1h)
• ITCSS - Une manière intéressante d'organiser des projets à grande échelle (css-tricks.com)

(Photo de couverture via speakerdeck.com)