Découvrez CSS_StyleLint_Basics en utilisant stylelint

Lorsque vous écrivez beaucoup de code CSS, plusieurs erreurs peuvent se produire. Vous aurez peut-être besoin d'un outil pour éviter vos erreurs d'écriture CSS.

Peut-être que parfois votre erreur est en réalité un bug. Ou il peut s'agir simplement d'une incohérence ou d'un style de codage peu clair en raison d'un manque de rigueur. Peut-être que beaucoup d'entre eux peuvent sembler triviaux (selon votre tempérament), mais à mesure que la base de code se développe et avec le temps, de nombreuses personnes feront des choses laides en les utilisant. Les conséquences de cette affaire dépassent votre imagination.

Vous essayez de vous contrôler. Vos collègues vous aident également et corrigent rapidement vos erreurs lorsque vous vous promenez. Cependant, vous et vos collègues êtes auteurs d’erreurs, l’échec est donc inévitable en fin de compte, du moins dans une certaine mesure. Plus tard, vous ou quelqu'un d'autre devrez résoudre le problème causé par l'erreur CSS sur votre page.

Ni vous ni vos collègues n'aimez discuter de vos erreurs car elles sont embarrassantes. Cela peut même parfois être frustrant ou dommageable sur le plan émotionnel. Certaines disciplines sont parfois utiles pour maintenir une base de code, comme un style d'écriture cohérent, qui peut sembler un peu pédant et ennuyeux lorsqu'il est implémenté manuellement. Sinon, ils feront ressortir les éléments insistants et têtus que vous aimez habituellement.

De plus, vous préférerez peut-être pouvoir corriger les erreurs à temps, plutôt que d'attendre que quelqu'un d'autre signale l'erreur après la révision du code, puis effectuez la modification vous-même et déclarez que vous ne ferez plus de telles erreurs. Lorsqu'il y a une erreur dans votre CSS, un retour rapide vous aidera à gagner beaucoup de temps.

Ce dont vous avez besoin, c'est d'une machine qui évite les erreurs

Vous avez besoin d'une machine à l'épreuve des bugs qui comprend CSS et vous comprend : vos intentions, vos préférences, vos idées et vos faiblesses.

Cette machine aura des limites. Tout n’est pas parfait. Mais cette limitation est différente pour vous et vos collègues. Tant qu’il pourra prévenir les erreurs, il continuera à les prévenir, inlassablement. Pendant ce temps, vous et vos collègues pouvez toujours améliorer la machine, en étendant ses capacités et en affaiblissant ses limites. C'est open source, et des personnes du monde entier peuvent y participer et faire leur part - d'autres auteurs qui veulent s'empêcher de commettre des erreurs d'écriture CSS.

Comme tout le reste, les auteurs CSS ont besoin de linters

Nous appelons ces programmes qui évitent les erreurs des « linters ». Il existe plusieurs meilleurs linters en Javascript. ESLint, en particulier, fonctionne comme un miracle et nous montre à quel point un bon linter peut être utile. Mais en CSS, nous n'avons pas cette chance et nos options sont très limitées : scss-lint basé sur Ruby avec un préprocesseur spécial et l'ancien CSS Lint.

Mais c'était avant PostCSS. De plus, PostCSS fournit des méthodes pour créer des outils CSS plus interactifs. Il peut analyser n'importe quelle syntaxe de type CSS dans un plug-in d'arbre de syntaxe abstraite (AST) à des fins d'analyse et d'exploitation. Et avec des analyseurs personnalisés, PostCSS peut même gérer des modèles invalides non standard (tels que les // commentaires)

Les conditions sont réunies pour produire un linter doté de fonctionnalités plus puissantes - basé sur la puissance de PostCSS et inspiré des meilleures fonctionnalités de scss-lint et ESLint.

Je travaille sur ce projet avec plusieurs amis, et maintenant je vais commencer à vous présenter l'outil que nous avons développé : stylelint.

Choses que vous pouvez faire avec stylelint

Ce qui suit est un résumé des fonctions essayées dans stylelint, qui compte plus d'une centaine de règles et est évolutif.

À ce stade, si vous vous sentez un peu impatient (« Ok, Ok : je crois que stylelint fera des merveilles. Pas besoin de résumer. »). Passez simplement à la section suivante, où je vais simplement aborder certains problèmes et donner quelques conseils.

Correction d'erreurs

Certaines règles de stylelint sont conçues pour détecter les erreurs évidentes, telles que les fautes d'orthographe ou les omissions faites lorsque vous étiez distrait ou que vous aviez les yeux larmoyants. Par exemple, vous pouvez supprimer les blocs vides, les valeurs hexadécimales non valides, les sélecteurs en double, les noms d'animation sans nom et la syntaxe de dégradé linéaire incorrecte.

Les autres règles consistent à faire de votre mieux pour détecter les erreurs plus subtiles. Voici une règle : donnez un avertissement lorsque vous utilisez un attribut abrégé (comme margin-top) qui remplace son homologue d'attribut (comme margin), car cela peut être dû à un oubli de votre part. De plus, il existe également une règle qui vous avertira : lorsqu'une situation confuse se produit, comme par exemple la règle A apparaissant avant la règle B, mais remplaçant en fait la règle B parce que le sélecteur de la règle A a une priorité plus élevée (par exemple, la règle A est .foo.bar{···}, la règle B est .foo{···}). C'est une situation très délicate.

Il existe également une règle qui utilise le plug-in douse de PostCSS pour vérifier si votre navigateur prend en charge ce style. L'autre utilise le plug-in css-colorguard pour demander la similitude des couleurs afin d'éviter de vous confondre. (Veuillez noter : c'est l'un des principaux avantages de stylelint par rapport à PostCSS : stylelint peut afficher des invites avec très peu d'effort par rapport aux autres plugins PostCSS.)

Appliquer les meilleures pratiques

Si vous utilisez des méthodes système dans vos feuilles de style ou définissez un guide de style pour votre code, vous devez désactiver ces modèles. stylelint fournit déjà ces fonctions.

Tout d’abord, vous devez avoir un contrôle strict sur vos sélecteurs. En utilisant stylelint, vous pouvez désactiver les sélecteurs au-delà d'une certaine spécificité ou définir des limites de profondeur d'imbrication. Vous pouvez supprimer les sélecteurs de catégorie (par exemple, les sélecteurs sans identifiant) et utiliser les conventions de dénomination des expressions régulières pour les sélecteurs restants.

Vous pouvez désactiver l'utilisation de !important ou de hacks de navigateur que votre navigateur ne prend pas en charge. Si vous utilisez Autoprefixer (ou vous devriez le faire), vous pouvez désactiver l'utilisation des préfixes du fournisseur dans les feuilles de style source.

Si vous souhaitez être plus rigoureux - vous pouvez consacrer du temps à la configuration pour garantir une cohérence absolue - vous pouvez imposer l'ordre des propriétés des feuilles de style et fournir des propriétés, des valeurs pour la liste noire, la liste blanche, les fonctions ont également des unités.

Appliquer les conventions de style de code

stylelint applique automatiquement les conventions de style de code afin que vous et vos coéquipiers n'ayez pas à les configurer activement. Nous nous engageons à rendre ces règles plus complètes et plus flexibles.

Ces règles se concentrent principalement sur les espaces, mais s'appliquent également à d'autres détails, tels que les guillemets, les lettres majuscules et minuscules, l'écriture de zéros avant les décimales, l'utilisation de mots-clés et l'orthographe des valeurs, etc.

Rêvez que vous et vos coéquipiers puissiez établir une convention de formatage (par exemple, nous laissons toujours un espace après les deux points dans une déclaration) et la modifier dans votre configuration stylelint, et vous n'aurez plus à en discuter. Laissez-le être exécuté dans le royaume des machines.

Tout créer et développer

Nicholas Zakas, le créateur d'ESLint (et de CSS Lint), écrit que le succès d'ESLint réside dans son extensibilité. stylelint tente de suivre l'exemple d'ESLint et de fournir aux auteurs CSS un linter également extensible.

Vous pouvez écrire et publier vos propres plugins de règles. Il y en a un tas disponible maintenant ; et nous sommes impatients de voir les excellents plugins des autres.

Les configurations sont extensibles et peuvent donc être partagées. Quant aux plug-ins, nous avons appris l'intérêt de cette fonctionnalité grâce à ESLint. Vérifiez qui inclut les configurations WordPress et SUITCSS et celles publiées.

Si vous n'aimez pas les astuces intégrées de stylelint, vous pouvez créer manuellement vos propres styles, même pour votre organisation. Vous pouvez également personnaliser les règles utilisées pour fournir des messages d'avertissement.

À l'aide de l'API stylelint, vous pouvez créer des plug-ins de compilateur de texte et les tester pour intégrer stylelint dans tous les aspects de votre flux de travail.

Si vous avez des idées d'extensions stylelint, n'hésitez pas à nous le faire savoir !

Réponses aux questions attendues

Il se peut que plusieurs questions vous viennent à l’esprit. Voici quelques explications pour les questions les plus courantes :

Est-il possible d'utiliser stylelint dans SCSS ou Less ?

La réponse est oui, vous pouvez utiliser stylelint dans SCSS et il est pris en charge dans Less ! Étant donné que PostCSS autorise les analyseurs personnalisés, stylelint peut facilement prendre en charge une variété de syntaxes non standard : vous pouvez personnaliser un analyseur PostCSS pour les analyser.

Grâce à l'analyseur PostCSS, stylelint prend en charge SCSS, Less et le nouveau SugarSS. Si vous souhaitez implémenter un autre support de syntaxe personnalisé, vous pouvez y parvenir via PostLess !

Bien sûr, il existe certaines règles qui gênent votre syntaxe non standard (comme la #{$interpolation} qui confond les sélecteurs d'identifiant Sass). Parce que stylelint essaie de masquer le style de nos feuilles de style - certaines personnes utilisent du CSS standard, d'autres utilisent des langages étendus comme SCSS, certaines personnes utilisent des propriétés personnalisées étranges, etc. - cela crée inévitablement des trous qui doivent être comblés. Cependant, nous travaillons constamment sur ces bugs au fur et à mesure que nous les trouvons ; entre-temps, toutes les règles peuvent être complètement désactivées ou désactivées feuille de style par feuille de style ou ligne par ligne.

stylelint peut-il utiliser la future syntaxe CSS ?

Oui ! Semblable à la réponse indiquée ci-dessus : stylelint peut comprendre tout ce que PostCSS comprend, y compris l'activation de toute future syntaxe CSS (éventuellement via les plugins PostCSS). En fait, certaines règles stylelint gèrent spécifiquement la future syntaxe CSS et certaines propriétés personnalisées.

La configuration stylelint est énorme, par où commencer ?

Nous recommandons trois méthodes de configuration :

Étendre une configuration publiée. Nous maintenons les normes de configuration stylelint afin de fournir aux utilisateurs une base de référence cohérente. Et de nombreuses configurations ont également été annoncées. Partez de zéro et ajoutez une règle à la fois. Par défaut, aucune des règles n'est activée, donc en ajoutant des règles manuellement, vous saurez lesquelles seront appliquées et comprendrez chaque règle que vous ajoutez. Activez la configuration copier-coller, décidez quelles options utiliser et supprimez-les de manière sélective.

Heureusement, vous n'avez pas besoin d'écrire encore et encore une énorme configuration de stylelint. Vous pouvez choisir un style que vous aimez et l'utiliser n'importe où.

Le moyen le plus simple d'exécuter stylelint ?

Pour la plupart des gens, le moyen le plus simple consiste à utiliser sa ligne de commande.

Si vous préférez le plugin gulp, vous pouvez utiliser gulp-stylelint. En ce qui concerne le webpack, vous avez le choix entre de nombreuses options. Nous espérons que ces plugins vous inspireront pour créer d'autres plugins stylelint, par exemple pour Grunt. (Vous pouvez le trouver dans les projets open source !)

Vous pouvez également exécuter stylelint en utilisant le plugin PostCSS, y compris tout ce qui est inclus dans le plugin. Cela signifie que vous pouvez utiliser stylelint partout où vous pouvez utiliser PostCSS (qui couvre presque tous les outils de compilation) !

De plus, il existe également un plug-in de compilation de texte stylelint pour Atom, Sublime Text et VS Code afin de fournir les commentaires les plus rapides. Pour plus d'informations, consultez la liste des outils complémentaires sur le site stylelint.

Comme indiqué ci-dessous, dans la ligne de commande, les résultats que vous attendez :

s'affiche comme suit dans Atom

stylelint peut-il corriger mon erreur ?

Non, mais un autre appelé stylefmt vise exactement cela. Il nécessite une configuration stylelint - très similaire à celle que vous utilisez pour le peluchage - et peut corriger toutes les erreurs. Nous espérons qu'avec les contributions de la communauté, stylelint pourra évoluer pour corriger automatiquement les bogues qui violent les règles de stylelint. S'il vous plaît, aidez-les à atteindre cet objectif !

Vous pouvez également utiliser d'autres outils, tels que CSScomb ou perfectionlist combinés avec stylelint, pour corriger et forcer automatiquement les pauses.

Utiliser du peluchage pour la supplémentation en contrainte

Il y a une énorme quantité de contraintes dans un bon CSS. C'est pourquoi nous passons beaucoup de temps à discuter de méthodes comme SMACSS, ACSS, BEM, SUITCSS, ITCSS, etc. Nous savons tous à quel point il est facile d'écrire du mauvais CSS, donc si nous n'avons plus peur d'écrire des styles CSS, nous devons établir une stratégie intelligente dans notre travail et nous y tenir courageusement.

L'objectif de stylelint est d'automatiser l'exécution - en fournissant un ensemble de règles de base et un cadre enfichable que les auteurs CSS peuvent utiliser pour mettre en œuvre leurs propres stratégies.

Essayez-le et dites-nous comment cela fonctionne pour vous. Si vous avez des idées pour de meilleures améliorations, telles que des règles de contribution, des améliorations, des tests, des corrections de bugs, de la documentation, de nouvelles idées ou simplement des commentaires, envoyez-nous un message ! Cela donne à nos développeurs à tous les niveaux quelque chose à faire.