Introduction à ITCSS pour les développeurs Web

Il y a une poignée d'excellentes méthodes pour structurer le code CSS, et ils travaillent tous de différentes manières. Les plus populaires sont OOCSS et SMACSS, mais il existe également une méthode moins connue appelée ITCSS (CSS inversé en triangle) créé par Harry Roberts.

Ce n'est pas une bibliothèque ou un cadre, mais un méthodologie d'écriture de code c'est évolutif et facile à manipuler. Les avantages de ITCSS vont de organisation simple du code des fichiers moins volumineux et une meilleure compréhension de l'architecture CSS.

ITCSS n'est pas pour tout le monde, mais il fournit un moyen professionnel de regarder les feuilles de style avec clarté pendant le processus de codage. Explorons les concepts sous-jacents à ITCSS et voyons comment ils peuvent être appliqués à des projets Web..

Qu'est-ce que ITCSS??

Les méthodes modernes d’organisation des CSS retombent souvent sur modularisation ou Objets CSS construire des idées abstraites.

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

Depuis ITCSS est principalement propriétaire, aucun livre de règles détaillé n'existe concernant son utilisation. Seulement un ensemble de principes spécifiques est à notre disposition. L'auteur en parle 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é sur la spécificité. Donc, si vous connaissez déjà OOCSS, considérez-le comme unique. architecture CSS alternative essayer.

Voici quelques-uns des plus grands avantages de l’utilisation de ITCSS:

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

Le système ITCSS

Examinons le fonctionnement du modèle de triangle inversé en utilisant l'illustration suivante du message de Lubos Kmetko.

Un écoulement directionnel du sommet plat du triangle inversé jusqu’à la pointe du bas symbolise une augmentation de la spécificité. Ce se concentrer 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 façon. Cela a plus de sens pour les utilisateurs de Sass / Less en raison de la fonctionnalité d'importation. Il suffit de penser à chaque sous-section comme une méthodologie pour division et organisation du code CSS réutilisable.

Regardons rapidement chaque section du triangle inversé se déplacer du haut vers le bas.

Réglages - Variables et méthodes de préprocesseur (pas de sortie CSS réelle)
Outils - Mixins et fonctions (pas de sortie CSS réelle)
Générique - Réinitialisations CSS pouvant inclure la réinitialisation d'Eric Meyer, Normalize.css ou votre propre lot de code
Éléments - 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 - Cours d'esthétique pour le style de tous les éléments de la page (souvent combinés à la structure des classes d'objets)
Les atouts - Les styles les plus spécifiques pour remplacer tout le reste du triangle

Chaque couche du triangle inversé peut être ajusté pour répondre à vos besoins. Donc, si vous n'utilisez pas de préprocesseur CSS, vous n'aurez plus besoin des calques Settings ou Tools..

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 en classes d’objets, laissant très peu de place dans la section Composants..

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

Bien que le créateur d’ITCSS, Harry Roberts, souhaitait conserver ses méthodes 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 Web personnel de Harry Roberts..

BEM + IT = Nommer BEMIT

BEM est l’un des systèmes de nommage CSS les plus populaires. Cela signifie bloc-élément-modificateur et suit une syntaxe très particulière.

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

Des blocs sont des classes pour des éléments individuels qui peuvent être répliqués et autonomes.
Éléments font toujours partie d'un bloc
Modificateurs toujours modifier un bloc ou un élément pour modifier légèrement son apparence (on / off, actif / inactif, fixe, statique, surlignage / neutre).

BEMIT est la convention de nommage adopté par ITCSS, qui emprunte des idées à BEM tout en mettant en œuvre de nouvelles idées avec ITCSS.

La syntaxe BEM dicte des règles très spécifiques. Vous trouverez ci-dessous un exemple du site Web de BEM:

.formulaire  .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 décrivent les éléments internes compatibles avec ce bloc particulier. Les modificateurs fonctionnent de la même manière mais utilisent deux tirets pour l'identification.

Harry approfondit BEMIT dans cet article 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 espaces de noms pour les objets apparaissant comme préfixes pour chaque nom de classe majeur. Ils se décomposent en o- pour les objets, c- pour les composants, et vous- pour les utilitaires (comme clearfix ou centrage de texte).

Voici quelques exemples de code représentant conventions de dénomination BEMIT typiques.

…

Il recommande également d'utiliser le @ suffixe pour les classes basées sur les styles de média. Alors le .o-media classe pourrait changer à .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é pour des projets Web de base. Je pense que la plupart des développeurs préfèrent utiliser des requêtes multimédia communes et réécrire les classes à différents points d'arrêt. Mais je ne peux pas dire que l’une ou l’autre méthode soit bonne ou mauvaise, et chacun peut décider s’il souhaite ou non utiliser BEMIT.

Je recommande fortement de lire cet article sur l'intranet de BEMIT pour en savoir plus sur les raisons pour lesquelles ITCSS a étendu BEM et sur la manière dont vous souhaitez nommer vos classes CSS..

ITCSS peut être résumé comme une méthode d'organisation pour écrire CSS réutilisable et évolutif. BEM est la syntaxe de dénomination préférée et BEMIT étend cela au travail avec des espaces de noms pour un code plus spécifique et reconnaissable.

Il y a beaucoup à apprendre, et si vous débutez dans CSS, ce sera un concept difficile à casser. Mais si vous êtes prêt à apprendre, je vous garantis que vous serez surpris par la nature élégante du code ITCSS..

Emballer

Les développeurs front-end 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 travail de projet réel. Si vous avez la témérité et le désir d'apprendre, alors ITCSS peut être utile à ajouter à votre trousse à outils. Même si je n'ai trouvé aucune documentation officielle, il existe encore beaucoup de ressources en ligne pour en savoir plus sur ITCSS.

Gérez 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 d'une heure)
ITCSS - Un moyen intéressant d'organiser des projets de grande envergure (css-tricks.com)

(Photo de couverture via speakerdeck.com)