À la recherche d'une pile qui surveille la qualité et la complexité de CSS

De nombreux développeurs écrivent sur la façon de maintenir une base de code CSS, mais peu de gens écrivent sur la façon dont ils mesurent la qualité de la base de code. Bien sûr, nous avons d'excellents outils de vérification de code comme Stylelint et CSSlint, mais ils ne peuvent empêcher les erreurs au niveau du micro. Utilisez une mauvaise notation de couleur, ajoutez les préfixes du fournisseur lorsque l'autoprefixer est déjà utilisé, écrivez des sélecteurs d'une manière incohérente ... etc.

Nous recherchons toujours des moyens d'améliorer la façon dont CSS est écrit: OOCSS, BEM, SMACSS, ITCSS, pratique en premier, et plus encore. Mais d'autres communautés de développement semblent avoir évolué à partir d'outils de vérification de code simples à des outils tels que Sonarqube et le détecteur de désordre PHP, tandis que la communauté CSS manque encore plus d'outils de vérification approfondie que les règles de lutte peu profonde. Pour ce faire, j'ai créé Project Wallace, un ensemble d'outils pour vérifier et appliquer la qualité CSS.

Qu'est-ce que le projet Wallace?

Au cœur du projet Wallace se trouve un ensemble d'outils, y compris une interface de ligne de commande, un inspecteur de code, un analyseur et un journaliste.

Voici un bref aperçu de ces outils.

Interface de ligne de commande

Cela vous permet d'exécuter une analyse CSS sur la ligne de commande et d'obtenir des statistiques pour tout CSS que vous lui fournissez.

Vérificateur de code constyble

Il s'agit d'un vérificateur de code conçu spécifiquement pour CSS. Sur la base des résultats de l'analyse générés par Wallace, vous pouvez définir des seuils qui ne doivent pas être dépassés. Par exemple, une seule règle CSS ne doit pas contenir plus de 10 sélecteurs, ou la complexité moyenne du sélecteur ne doit pas être supérieure à 3.

Analyseur

Extrait-CSS comme son nom l'indique: Extraire tous les CS d'une page Web afin que nous puissions l'envoyer à ProjectWallace.com pour analyse.

Journaliste

Tous les résultats de l'analyse pour l'extrait de CSS sont envoyés à projectwallace.com, et le tableau de bord contient des rapports de toutes les données. Il est similaire aux statistiques CSS, mais il suit plus de mesures et stocke les résultats dans le temps et les affiche dans le tableau de bord. Il montre également la différence entre les deux points dans le temps, ainsi que de nombreuses autres fonctionnalités.

Analyser la complexité CSS

Il n'y a pas beaucoup d'articles sur la complexité de CSS, mais celui que Harry Roberts (CSSWIZardry) m'a impressionné. Le fait est que chaque sélecteur CSS est essentiellement un tas de déclarations IF, ce qui me rappelle la complexité de la boucle de la méthode que j'ai dû calculer manuellement lors d'un cours d'informatique. L'article de Harry a beaucoup de sens pour moi car il peut écrire un module pour calculer la complexité d'un sélecteur CSS - à ne pas confondre avec la spécificité, bien sûr, parce que c'est une question complètement différente en termes de complexité.

Fondamentalement, la complexité du CSS peut se présenter sous de nombreuses formes, mais voici quelques-unes des choses auxquelles je prête le plus d'attention lors de l'examen des bases de code:

Complexité de boucle de sélecteur CSS

Chaque partie du sélecteur signifie que le navigateur doit en exécuter une autre instruction IF. Les sélecteurs plus longs sont plus complexes que les sélecteurs plus courts. Ils sont plus difficiles à déboguer, et l'analyse du navigateur est plus lente et plus difficile à couvrir.

 <code>.my-selector {} /* 1 个标识符*/ .my #super [complex^="selector"] > with ~ many :identifiers {} /* 6 个标识符*/</code>

Nombre de déclarations par règles (cohésion)

Les ensembles de règles contenant de nombreuses déclarations sont plus complexes que les ensembles de règles contenant un petit nombre de déclarations. La popularité des cadres CSS fonctionnels tels que le vent arrière et les tachyons peut être attribué à la «simplicité» relative du CSS lui-même.

 <code>/* 1 条规则，1 个声明=> 内聚性= 1 */ .text-center { text-align: center; } /* 1 条规则，8 个声明=> 内聚性= (1 / 8) = 0.125 */ .button { background-color: blue; color: white; padding: 1em; border: 1px solid; display: inline-block; font-size: normal; font-weight: bold; text-decoration: none; }</code>

Nombre de lignes de code source

Plus il y a de code, plus il y a de complexité. Chaque ligne de code est maintenue et est donc incluse dans le rapport.

Nombre moyen de sélecteurs par règle

Une règle contient généralement 1 sélecteur, mais parfois plus. Cela rend difficile de supprimer certaines parties du CSS, ce qui le rend plus compliqué.

Toutes ces mesures peuvent être vérifiées par code à l'aide de Constyble, le vérificateur de code CSS Complexity utilisé par Project Wallace dans son ensemble d'outils. Après avoir défini la ligne de base pour la métrique, installez simplement Constyble et configurez le fichier de configuration. Voici un exemple du fichier de configuration que j'ai extrait directement du Readme CONSTYBLE:

 <code>{ // 不要超过4095 个选择器，否则IE9 将删除任何后续规则"selectors.total": 4095, // 我们不需要ID 选择器"selectors.id.total": 0, // 如果出现除这些颜色之外的任何其他颜色，则报告错误！ "values.colors.unique": ["#fff", "#000"] }</code>

La meilleure partie est que Constyble fonctionne sur votre CSS final, il n'effectue donc ses opérations qu'après tout le travail de prétraitement que vous avez de SASS, moins, POSTCSS ou tout autre pré-atroceur que vous utilisez. De cette façon, nous pouvons effectuer une vérification intelligente du nombre total de sélecteurs ou de la complexité moyenne du sélecteur - tout comme tout inspecteur de code, vous pouvez l'utiliser dans le cadre de l'étape de construction et si des problèmes surviennent, votre version échouera.

La récolte de l'utilisation du projet Wallace

Après avoir utilisé Project Wallace pendant un certain temps, j'ai trouvé que c'était idéal pour suivre la complexité. Bien qu'il soit principalement utilisé à cet effet, c'est également un bon moyen de trouver des erreurs subtiles que les inspecteurs de code dans CSS peuvent ne pas trouver, car ils vérifient le code prétraité. Voici quelques choses intéressantes que j'ai trouvées:

• J'ai cessé de compter le nombre de stories d'utilisateurs qui doivent réparer des couleurs incohérentes sur le site pendant le sprint. Il y a des projets depuis plusieurs années et des gens qui entrent et sortent de l'entreprise: c'est un secret pour que toutes les couleurs de marque sur le site Web se trompent. Heureusement, nous avons mis en œuvre Constyble et Project Wallace pour obtenir la reconnaissance des parties prenantes car nous avons pu prouver que la marque de nos clients était très précise dans de nouveaux projets. Constyble nous empêche d'ajouter des couleurs qui ne sont pas dans le guide de style.
• J'ai installé le projet Wallace Webhooks dans un projet où mon ancien employeur travaille. Chaque fois que vous ajoutez un nouveau CSS à votre projet, il enverra le CSS à ProjectWallace.com et sera affiché immédiatement dans le tableau de bord du projet. Cela facilite la recherche lorsqu'un sélecteur ou une requête multimédia spécifique est ajouté au CSS.
• La refonte CSS-Tricks plus tôt cette année a signifié une baisse significative de la complexité et de la taille du fichier. La refonte est excellente et peut être analysée. Cela vous donne l'occasion de regarder de plus près la situation dans les coulisses et de comprendre comment les auteurs ont changé leur CSS. Savoir quelles sections ne fonctionnent pas pour le site et quelles nouvelles sections s'appliquent peut vous donner une idée de la croissance de CSS.
• Une grande entreprise internationale basée aux Pays-Bas avait autrefois plus de 4095 sélecteurs dans un dossier CSS. Je sais qu'ils développent activement des marchés émergents et ils doivent prendre en charge Internet Explorer 8. IE9 arrête de lire tous les CSS après 4095 sélecteurs, de sorte que la plupart de leur CSS n'est pas appliqué dans des navigateurs plus âgés IE. Je leur ai envoyé un e-mail et ils ont vérifié le problème et je l'ai immédiatement corrigé en divisant le CSS en deux fichiers.
• Gitlab utilise actuellement plus de 70 tailles de police uniques. Je suis presque sûr que leur typographie est compliquée, mais cela semble un peu trop ambitieux. C'est peut-être à cause de certains CSS tiers, mais c'est difficile à juger.
• Lors de l'héritage de projets d'autres développeurs, je passe en revue les résultats de l'analyse CSS pour comprendre les difficultés du projet. L'utilisent-ils en grande quantité! IMPORTANT? La taille moyenne de la règle est-elle facile à comprendre ou ajoute-t-elle plus de 20 déclarations par règle ensemble? Quelle est la longueur moyenne du sélecteur et sont-elles difficiles à couvrir? Ce serait bien de ne pas recourir à .Complex-Selector-Override \ [class \] [classe] ... [classe].
• Une astuce intelligente pour vérifier si le zoom-out est efficace est que Constyble vérifie si l'indicateur de numéro de ligne du code n'est pas supérieur à 1. Le rétrécissement du CSS signifie que tout CSS est placé sur une seule ligne, donc le nombre de lignes de code devrait être égal à 1!
• Ce qui s'est passé tout le temps dans mon autre projet, c'est l'échec de la rétrécissement. Je ne sais pas tant que la différence de Project Wallace me montre beaucoup de couleurs soudainement écrites comme #AAAAA au lieu de #AAAA. Ce n'est pas une mauvaise chose en soi, mais cela se produit en tant de couleurs en même temps que quelque chose a dû mal. Une enquête rapide a montré que j'ai fait une erreur en rétrécissant.
• Stackoverflow a quatre façons uniques d'écrire des couleurs blanches. Ce n'est pas nécessairement une mauvaise chose, mais cela peut être un signe que les programmes de minification CSS sont corrompus ou incohérents dans les systèmes de conception.
• Facebook.com a plus de 650 couleurs uniques dans leur CSS. Le système de conception cassé commence également à sonner comme une possibilité.
• Un projet de mon ancien employeur affiche une entrée [Type = Checkbox]: Étiquette. Vérifiez. Après une inspection plus approfondie, nous avons constaté que ce sélecteur localise les entrées imbriquées dans une autre entrée. C'est impossible dans HTML, et nous pensons que nous avons dû oublier la virgule dans CSS. Aucun vérificateur de code ne nous avertit à ce sujet.
• Le nidification dans les préprocesseurs CSS est cool, mais peut provoquer de mauvaises choses comme @Media (max-largeur: 670px) et (max-largeur: 670px), comme je l'ai trouvé dans Syntax.fm.

Pour Project Wallace, ce n'est que la pointe de l'iceberg. Une fois que vous commencez à analyser votre CSS, il y a plus à apprendre et à découvrir. Ne regardez pas seulement vos propres statistiques, mais aussi ce que font les autres.

J'ai utilisé ma configuration de constyble comme sujet de conversation avec des développeurs moins expérimentés pour expliquer pourquoi ils ne parviennent pas à s'appuyer sur des blocs CSS complexes. Discuter avec d'autres développeurs pourquoi nous devons éviter ou promouvoir certaines méthodes d'écriture CSS peut aider à transférer les connaissances. Cela m'aide également à garder mes pieds sur le sol. Devoir expliquer aux développeurs PHP qui veulent juste aider, ce que je fais depuis des années m'a fait repenser pourquoi je fais les choses comme je le fais.

Mon objectif est de ne dire à personne ce qui est bien ou mal dans CSS, mais de créer des outils afin que vous puissiez vérifier ce qui fonctionne pour vous et vos collègues. Project Wallace est là pour nous aider à comprendre le CSS que nous écrivons.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!