加入收藏 | 设为首页 | 会员中心 | 我要投稿 源码网 (https://www.900php.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 服务器 > 搭建环境 > Windows > 正文

使用 stylelint检查CSS_StyleLint

发布时间:2016-11-24 17:36:33 所属栏目:Windows 来源:站长网
导读:当你书写大量的CSS代码时,可能会出现不止一个的错误。可能需要某个工具来阻止你CSS书写的错误。 可能,有的时候你的错误真的是一个bug。也有可能仅仅因为草率造成的不一致或者不明确的代码风格。可能它们当中的许多看起来微不足道(取决于你的性子),但是

当你书写大量的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的选择器),并对其余的选择器使用正则表达式进行命名约定。

你可以禁止!important的使用,或者你的浏览器并不支持的brower hacks。如果你使用Autoprefixer(或者说你应该使用),你可以禁止在源样式表中使用供应商前缀。

如果你想要更加严谨 -- 你可以花费一些时间在配置上,以保证绝对的一致性 -- 你可以强制执行样式表属性的顺序,并为黑名单,白名单提供属性,值,函数还有单位。

执行代码样式的约定

stylelint具有自动执行代码样式的约定,所以你和你的队友无需主动设置。我们致力于使这些规则更加全面灵活。

这些规则主要针对于空格,但是同样针对于其它的细节,如;引号,大小写字母,在小数前写零,使用关键字以及拼读出值等等。

梦想你和你的队友可以建立一个格式约定(例如我们始终在声明冒号之后留有一个空格),并在你的stylelint配置中进行修改,之后你们就不会为此再次讨论。让其执行于机器王国。

制定以及扩展一切

Nicholas Zakas,ESLint(以及 CSS Lint)的创作者,写到ESLint的成功在于它的扩展性。stylelint试图遵循ESLint的领先优势,并且提供给CSS 作者一个linter,同样具有扩展性。

你可以书写并且发布自己的规则插件。现在已经具有了一大堆可以使用的;并且我们渴望看到别人的优秀插件。

配置是可扩展的,因此可以共享。至于插件,我们从ESLint了解了这一功能的价值性。检查其中包括WordPress和SUITCSS配置的,并且已经公布的。

如果你不喜欢 stylelint 的内置提示,你可以手工创建属于你自己的风格,甚至可以为你的组织进行创建。你还可以自定义用于提供警告信息的规则。

使用stylelint的API,你可以创建文本编译器的插件,并进行测试使stylelint 融入到你的工作流的每个方面。

如果你有关于stylelint扩展的想法,请让我们知道!

预期问题的答案

在你的心中可能存在几个疑问。这里有几个最为常见问题的解释:

是否可以在SCSS或者Less中使用stylelint?

答案是肯定的,你可以在SCSS中使用stylelint,并且在Less中也得到了支持!自从PostCSS允许自定义解析器,stylelint可以很轻松的支持各种各样的非标准语法 - 你可以自定义一个PostCSS解析器进行解析。

正因为PostCSS解析器 -- 因此stylelint支持SCSS,Less以及新SugarSS。如果你想要实现另外一个自定义语法的支持,你可以通过PostLess得以实现!

(编辑:源码网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读