Lorsque vous écrivez beaucoup de code CSS, vous pouvez ressentir plus d'une erreur. Un outil peut être nécessaire pour empêcher vos erreurs d'écriture CSS.
Peut-être que parfois votre erreur est vraiment un bug. Il est également possible que les incohérences ou les styles de code peu clairs soient causés simplement par Hasty. Peut-être que beaucoup d'entre eux semblent triviaux (selon votre personnalité), mais à mesure que la base de code se développe et que le temps s'accumule, beaucoup de gens feront des choses laides lors de leur utilisation. Les conséquences des choses ne sont pas quelque chose que vous pouvez imaginer.
Vous essayez de vous contrôler. Vos collègues vous aident également lorsque vous êtes libre de corriger vos erreurs en temps opportun. Cependant, vous et vos collègues êtes à la fois le fabricant d'erreurs, donc en fin de compte, ce sont inévitablement des échecs au moins dans une certaine mesure. Plus tard, vous ou d'autres résoudre le problème causé par les erreurs CSS sur votre page.
Ni vous ni vos collègues n'aiment discuter des erreurs que vous avez faites parce que c'est gênant. Cela peut même être frustrant ou rompu émotionnellement parfois. Une certaine spécification est parfois utile pour la maintenance de la base de code, comme un style d'écriture cohérent, ce qui peut sembler un peu pédant et ennuyeux lorsqu'il est exécuté manuellement. Sinon, ils montreront les éléments de votre amour habituel pour montrer et l'entêtement.
De plus, vous préférez peut-être corriger les erreurs en temps opportun au lieu d'attendre que le code soit examiné et d'autres pour souligner les erreurs, et les modifier vous-même et déclarer que vous n'aurez plus de telles erreurs. Lorsque votre erreur CSS se produit, une rétroaction en temps opportun vous aidera à gagner beaucoup de temps.
Ce dont vous avez besoin est une machine qui empêche les erreurs
Vous avez besoin d'une machine qui empêche les erreurs de se produire, peut comprendre CSS et vous comprendre: vos intentions, vos préférences, vos idées et vos faiblesses.
Ces machines auront des limitations. Tout n'est pas parfait. Mais cette limitation est différente de vous et de vos collègues. Tant qu'il peut empêcher les erreurs, elle continuera de les empêcher, en travaillant sans relâche. Dans le même temps, vous et vos collègues pouvez toujours améliorer la machine, élargir sa fonctionnalité et affaiblir ses limites. C'est l'open source, et des gens du monde entier peuvent se joindre à nous et faire leur part - d'autres auteurs qui veulent s'empêcher d'avoir des erreurs de CSS.
Comme d'autres, les auteurs de CSS ont besoin de liners
Nous appelons ces programmes qui empêchent les «liners» d'erreurs. Il y a plusieurs meilleurs liners en JavaScript. Eslint en particulier, cela fonctionne miraculeusement, nous montrant qu'un bon linter est si utile. Mais dans CSS, nous n'avons pas autant de chance, nos choix sont très limités: SCSS-lint basé sur Ruby avec des préprocesseurs spéciaux et un peluche CSS plus tôt.
Mais c'était avant que PostCSS n'apparaisse. De plus, PostCSS fournit quelques méthodes pour créer des outils CSS plus interactifs. Il peut analyser n'importe quelle syntaxe de classe CSS dans un plugin de syntaxe abstrait (AST) pour l'analyse et le fonctionnement. Et avec un analyseur personnalisé, PostCSS peut même gérer des modèles non valides irréguliers (tels que // commentaires)
Les conditions de maturité peuvent déjà produire un linter avec des fonctionnalités plus puissantes - alimentées par PostCSS et inspirées par les meilleures caractéristiques de SCSS-lint et Eslint.
J'ai travaillé avec quelques amis sur ce projet, et maintenant je vais commencer à présenter les outils que nous avons développés: Stylelint.
Des choses que vous pouvez faire avec Stylelint
Ce qui suit est un résumé des fonctions essayées dans Stylelint, avec plus de 100 règles et évolutivité.
À ce stade, si vous vous trouvez un peu impatient ("OK, OK: je crois que Stylelint aura des effets de travail miraculeux. Pas besoin de trop de résumé."). Passez simplement à la section suivante, ici j'explique quelques problèmes et donne quelques conseils.
Capture d'erreur
Certaines règles de Stylelint sont conçues pour identifier les erreurs évidentes, telles que les erreurs d'orthographe ou omissions créées par vos yeux bouleversés ou blanches. Par exemple, vous pouvez désactiver les blocs vierges, les valeurs hexadécimales non valides, les sélecteurs en double, les noms d'animation sans nom et la mauvaise syntaxe de gradient linéaire.
Les autres règles sont de faire de votre mieux pour attraper des erreurs plus subtiles. Voici une règle: lorsque vous utilisez des propriétés abrégées (telles que margin ) qui peuvent remplacer leurs propriétés pairs (telles que margin-top ), un avertissement sera émis car cela peut être causé par votre négligence. De plus, il existe une autre règle qui vous avertit: lorsqu'un chaos se produit, si la règle A apparaît avant la règle B, mais couvre 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{・・・} et la règle B est .foo{・・・} ). C'est une situation très difficile.
Il existe également une règle qui utilise le plugin postcss Doiuse pour vérifier si votre navigateur prend en charge ce style. Un autre utilise le plugin CSS-Colorguard pour inciter à la similitude des couleurs pour éviter de confondre votre utilisation. (Veuillez noter: il s'agit de l'un des principaux avantages de Stylelint basé sur PostCSS: par rapport aux autres plug-ins PostCSS, Stylelint peut inviter avec peu d'effort.)
Appliquer les meilleures pratiques
Si vous utilisez des méthodes système dans vos feuilles de style ou avez un guide de style pour votre code, vous devez interdire ces modèles. Stylelint fournit déjà ces fonctionnalités.
Tout d'abord, vous devez contrôler dur votre sélecteur. Avec Stylelint, vous pouvez désactiver les sélecteurs qui dépassent une certaine spécificité ou fixer des limites à la profondeur de nidification. Vous pouvez désactiver les sélecteurs de catégorie (tels que les sélecteurs sans ID) et utiliser des expressions régulières pour dénoter les conventions pour les autres.
Vous pouvez interdire l'utilisation !important ou hacks de navigateur que votre navigateur ne prend pas en charge. Si vous utilisez AutopRefixer (ou vous le devriez), vous pouvez désactiver l'utilisation des préfixes du fournisseur dans la feuille de style source.
Si vous voulez être plus rigoureux - vous pouvez passer du temps sur la configuration pour assurer la cohérence absolue - vous pouvez appliquer l'ordre des propriétés de feuille de style et fournir des propriétés, des valeurs, des fonctions et des unités pour les listes noires et les listes blanches.
Exécuter les conventions de style de code
Stylelint a des conventions pour exécuter automatiquement les styles de code, afin que vous et vos coéquipiers n'ayez pas besoin de le configurer activement. Nous nous engageons à rendre ces règles plus complètes et plus flexibles.
Ces règles sont principalement destinées aux espaces, mais aussi pour d'autres détails, tels que des guillemets, des lettres supérieures et minuscules, écrivant des zéros avant décimales, en utilisant des mots clés, en épelant les valeurs, etc.
Rêver que vous et vos coéquipiers pouvez établir une convention de format (par exemple, nous laissons toujours un espace après avoir déclaré un côlon) et le modifions dans votre configuration Stylelint, et vous n'en discuterai plus après cela. Qu'il soit exécuté dans le royaume de la machine.
Développer et tout développer
Nicholas Zakas, le créateur d'Eslint (et CSS Lint), a écrit sur le succès d'Eslint dans son évolutivité. Stylelint tente de suivre l'exemple d'Eslint et fournit aux auteurs CSS un linter, qui est également extensible.
Vous pouvez écrire et publier votre propre plugin de règles. Maintenant, nous avons beaucoup de choses à utiliser; Et nous sommes impatients de voir les excellents plugins des autres.
La configuration est extensible et peut donc être partagée. Quant aux plugins, nous avons appris la valeur de cette fonctionnalité d'Eslint. Vérifiez qui inclut les configurations WordPress et FACTCSS et a été publié.
Si vous n'aimez pas les conseils intégrés de Stylelint, vous pouvez créer votre propre style à la main, ou même le créer 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 plugins pour les compilateurs de texte et effectuer des tests pour que Stylelint incorpore dans tous les aspects de votre flux de travail.
Si vous avez des idées sur les extensions de Stylelint, veuillez nous le faire savoir!
Réponses aux questions attendues
Il peut y avoir plusieurs questions dans votre esprit. Voici quelques-unes des explications les plus courantes:
Est-il possible d'utiliser Stylelint dans SCSS ou moins?
La réponse est oui, vous pouvez utiliser Stylelint dans SCSS et il est pris en charge en moins! Étant donné que PostCSS permet des analyseurs personnalisés, Stylelint peut facilement prendre en charge une grande variété de syntaxes non standard - vous pouvez personnaliser un analyseur PostCSS pour l'analyse.
En raison de l'analyseur PostCSS - Stylelint prend en charge SCSS, moins et les nouveaux sucres. Si vous souhaitez implémenter un autre support de syntaxe personnalisé, vous pouvez le faire avec Post!
Bien sûr, certaines règles sont liées à votre syntaxe non standard (comme #{$interpolation} dans le sélecteur d'ID SASS). Parce que Stylelint essaie de couvrir le style de nos feuilles de style - certaines personnes utilisent des CSS standard, certaines personnes utilisent des langues étendues telles que SCSS, certaines personnes utilisent des propriétés personnalisées étranges, etc. - elles créeront inévitablement certaines vulnérabilités qui doivent être remplies. Cependant, nous avons traité ces erreurs que nous avons trouvées; Toutes les règles de cette période peuvent être complètement fermées ou désactivées dans une feuille de style en ligne par rangée ou dans un style en une rangée.
Stylelint est-il capable d'utiliser la future syntaxe CSS?
Oui! Semblable à la réponse mentionnée ci-dessus: Stylelint peut comprendre tout ce que PostCSS comprend, y compris l'activation de toute syntaxe CSS future (probablement via le plugin PostCSS). En fait, certaines règles Stylelint traitent spécifiquement de la future syntaxe CSS et de certaines propriétés personnalisées.
La configuration de Stylelint est énorme, par où commencer?
Nous recommandons trois méthodes de configuration:
Étendre une configuration publiée. Nous maintenons les normes de configuration de stylelint pour faciliter l'utilisateur pour fournir une référence inhérente. Et de nombreuses configurations ont été annoncées. Commencez de zéro et ajoutez une règle à la fois. Par défaut, aucune règle n'est activée, donc en ajoutant les règles manuellement, vous saurez lequel sera appliqué et vous pouvez comprendre chaque règle que vous ajoutez. Démarrez la configuration de copie-coller, décidez quelles options utiliser et supprimez sélectivement.
Heureusement, vous n'avez pas besoin d'écrire une énorme configuration Stylelint encore et encore. Vous pouvez choisir un style que vous aimez et vous pouvez l'utiliser n'importe où.
La façon la plus simple d'exécuter Stylelint?
Pour la plupart des gens, le moyen le plus simple est de via sa ligne de commande.
Si vous préférez le plugin Gulp, vous pouvez utiliser Gulp-Stylelint. Pour WebPack, il existe de nombreuses possibilités de choix. Nous espérons que ces plugins vous inspireront à créer d'autres plugins Stylelint, tels que ceux de Grunt. (Vous pouvez rechercher dans des projets open source!)
Vous pouvez également exécuter Stylelint à l'aide du 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 plugin de compilation de texte Stylelint pour atome, texte sublime, code vs pour fournir les commentaires les plus rapides. Pour plus d'informations, veuillez vous référer à la liste des outils complémentaires sur le site Web de Stylelint.
Comme indiqué ci-dessous, sur la ligne de commande, les résultats que vous attendez de voir:
Show comme suit dans Atom;
Stylelint peut-il corriger mon erreur?
Non, mais un autre appelé stylefmt est conçu pour le faire. Il nécessite une configuration Stylelint - très similaire à ce que vous utilisez en libin - et peut corriger toutes les erreurs. Nous espérons que comme le personnel de la communauté contribue, Stylelint peut évoluer pour corriger automatiquement les erreurs qui violent les règles de Stylelint. Aidez-les à atteindre cet objectif!
Vous pouvez également utiliser d'autres outils tels que CSSComb ou PerfectList utilisés en conjonction avec Stylelint pour réparer et forcer automatiquement le repos automatiquement.
Utiliser la liaison pour la supplémentation en contrainte
Il existe d'énormes quantités de contraintes dans le bon CSS. C'est pourquoi nous passons beaucoup de temps à discuter de méthodes telles que SMACSS, ACSS, BEM, SATCSSS, ITCSS, etc. Nous savons tous que l'écriture du mauvais CSS est très facile, donc si nous n'avons plus peur de l'écriture de style CSS, nous devons établir une stratégie intelligente au travail et nous y rester plus.
L'objectif de Stylelint est d'automatiser l'exécution - fournissant un ensemble de règles de base et un cadre enfichable que les auteurs de CSS peuvent utiliser pour exécuter leurs propres stratégies.
Essayons-le et faisons-nous savoir comment vous servir. Si vous avez des idées de meilleures améliorations liées, telles que des règles de contribution, des améliorations, des tests, des bogues, des fichiers, de nouvelles idées ou simplement des commentaires, veuillez nous donner un message! De cette façon, tous nos développeurs à tous les niveaux ont du travail à faire.