使用 stylelint检查CSS

当你书写大量的CSS代码时,可能会出现不止一个的错误。可能需要某个工具来阻止你CSS书写的错误。

可能,有的时候你的错误真的是一个bug。也有可能仅仅因为草率造成的不一致或者不明确的代码风格。可能它们当中的许多看起来微不足道(取决于你的性子),但是随着代码库的增多以及时间累积,许多人使用时就会做出有丑陋的东西。事情的后果不是你可以想象的。

你尝试去控制自己。你的同事也帮助你,当你游离及时纠正你的错误。但是,你和你的同事都是错误的制造者,所以最后至少在一定程度上都不可避免的失败了。后来,你或者其他人就要解决你页面CSS错误造成的问题。

无论是你或者你同事都不喜欢讨论你犯下的错误,因为这是令人尴尬的事情。甚至有时会令人沮丧或者产生情感破裂。一定的规范有时候对于代码库的维护是有帮助的,如一致的书写风格,可能当手动执行时,看起来有点迂腐乏味。不然它们就会将你平时喜欢的爱出风头,固执的元素展现出来。

另外你可能更喜欢可以及时修正错误,而不是等待代码审查后由别人指出错误后,自己进行修改并声明自己不会再出现此类错误。当你的CSS出现错误时,一个及时的反馈会帮助你节省很多时间。

你所需要的是一个防止错误产生的机器

你需要一个防止错误产生的机器,可以理解CSS并且理解你:你的意图、喜好、主意以及弱点。

这种机器将具有局限性。所有的事物都不是完美的。但是这种局限和你以及你的同事又有所不同。只要是它可以阻止的错误它都会持续阻止,孜孜不倦。同时,你和你的同事可以一直改善机器,扩展它的功能并且削弱其局限性。它是开源的,全世界的人都可以加入其中尽自己的一份力量--其他想要阻止自己出现CSS书写错误的作者。

和其他一样,CSS 作者也需要 linters

我们将这些防止错误出现的程序称为"linters"。Javascript中有几个比较好的linter。尤其是ESLint,它起到的作用如奇迹般,向我们展示了一个好的linter是如此的有用。但是在CSS中,我们就没有这么幸运了,我们的选择十分有限: 基于Ruby的,具有特殊预处理程序的scss-lint和较早的CSS Lint。

但是这都是在PostCSS出现之前。除此之外,PostCSS提供了一些方法,建立更具有良好交互性的CSS工具。它可以将任何类CSS语法解析为抽象语法树(AST)的插件,从而进行分析以及操作。并且利用自定义解析器,PostCSS甚至可以处理不规范的无效模式(如//注释)

成熟的条件已经可以产生一个具有更强大功能的linter -- 基于PostCSS的强大功能以及在scss-lint和ESLint最佳功能的启发之下。

我和几个小伙伴一起致力于这个项目,现在我就要开始介绍一下我们开发的工具: stylelint.

使用stylelint你可以做的事情

以下是尝试于stylelint的功能总结,其中规则多达百余条,并且具有可扩展性。

在这一点,如果你发现自己已经变得有点不耐烦("Ok,Ok:我相信stylelint将具有奇迹般的工作效果。不需要过多的总结。")。仅仅跳到下一部分,在这里我仅仅说明一些问题并提供一些提示。

错误捕获

有些stylelint规则旨在找出明显的错误,如拼写错误或者由于你的心烦意乱或者睡眼惺忪时制造的疏漏。例如,你可以禁止空白块,无效的十六进制值,重复的选择器,未命名的动画名称和错误的线性渐变的语法。

其它的规则都是尽自己最大的努力捕捉更细微的错误。这里有一条规则: 当你使用可以覆盖其属性同行(如 margin-top)的速记属性时(如 margin),就会发出警告,因为这可能是由于你的疏忽造成的。另外,还有一种规则会警告你:当出现混乱局面时,如规则A出现在规则B之前,但是实际上覆盖了规则B,因为规则A的的选择器具有更高的优先级(如,规则A为 .foo.bar{···},规则B为 .foo{···})。这是一种十分棘手的情况。

还有一种规则使用了PostCSS的doiuse插件,用于检查你的浏览器是否支持此样式。另外一种则使用了css-colorguard插件用于提示颜色的相似性,以免造成你的混乱使用。(请注意: 这是基于PostCSS之上的stylelint的主要优势之一:相比于其它PostCSS 插件,用很少的努力,stylelint就可以进行提示。)

强制执行最佳实践

如果你在样式表中使用了系统方法,或者对你的代码设置了一个样式指南,你应该取缔这些模式了。stylelint已经提供了这些功能。

首先,你需要狠狠地控制你的选择器。使用stylelint,你可以禁止超过一定特异性的选择器或者在嵌套深度上设置限制。你可以禁止类别选择器(例如没有 id的选择器),并对其余的选择器使用正则表达式进行命名约定。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzppxg.html