我们写 JavaScript 代码的时候，公司或者项目组内部都会有一定的编码规范，比如：变量声明最好一行一个以分号结束，少用逗号一次性声明多个（这个只是说一种约定，你喜欢用逗号也没什么问题）；函数声明括号前后要有空格分隔等。我们也通常会使用一些像「eslint」的工具来做校验。
同样的，对于 HTML 代码而言，也会有一些规范，比如：img 标签需要 alt 属性；img 标签不能没有 src 属性；fieldset 标签中一定要有 legend 标签等等。说到校验 HTML ，你可能也会想到 「html-lint」这样的工具。
没错，这类工具主要做法都是通过对代码进行静态分析来实现的。w3c 就提供了一种相关的 在线服务 ，你直接告诉它你要校验的网站，它就能对该网站首页的 HTML 代码进行校验，并将结果展示出来。小编就拿「www.zhihu.com」做了实验，得到了下面的校验结果：
当然了，这是 w3c 根据它认为对的规范来进行校验的，你也可以结合自己的情况（比如：用到了一些框架，它生成了一些属性是 w3c 不推荐的），来设定自己的校验规则。
但是最近小编读到一篇由国外一位前端工程师——Ire Aderinokun 写的文章 ，她提到一种非常有意思的做法：用 CSS 来校验 HTML 代码。
听上去是不是挺有意思的？下面我就给大家讲讲具体是怎么做的！
举个例子：我们一般都不推荐大家在 HTML 中直接写 style 来进行样式定义，因为那样代码既不容易维护，而且优先级也比较高，样式不容易被覆盖。如果要对这个规范来校验，用「html-lint」就会进行 HTML 代码的分析，然后发现你的某个元素标签中找到了 style 属性，就高亮提醒你这不是最好的做法需要改进。而如果用 CSS 来校验，就非常简单，你直接定义如下 CSS 校验代码即可：
*[style] {
border: 5px solid red;
}
这个样式规则就是发现有任何元素有 style 属性，就会立马 5 个像素红框显示，提醒你这个地方有问题。清楚了吧，思路就是：利用 CSS 选择器来定位到不符合规范的元素，并以醒目的样式进行提醒 / 警告。
再比如，看看下面的这段 CSS 校验代码：
a:not([href]),
a[href="#"],
a[href=""],
a[href*="javascript:void(0)"] { … }
这段代码就是发现任何 a 元素中没有 href 属性或者该属性值为 #、空、或者 javascript:void(0) 都进行提醒。
同样的还有像这样的校验代码：
img:not([alt]) { ... }
就是规定 img 标签不能没有 alt 属性。
好了，顺着这个思路我相信大家可以根据自己需求定义出一大堆 CSS 校验代码。不妨去试试吧！
不过，小编个人觉得，这个方法也有一些缺点，比如：
- 如果 CSS 选择器无法定位到的就没有办法校验了
- 这种通过样式的提醒 / 警告方式对 CI 可能就没有那么友好了，因为得肉眼看（当然，办法我相信肯定是有的）
不过在你开发过程中还是有所帮助的，毕竟你得时不时的看你写的页面，这样就能看到不符合规范的提醒了。还有就是这种思路还是非常赞的！毕竟实现起来相比动不动就要去做代码分析，弄个分析器而言，这简直太简单了，直接借助浏览器的功能就可以了，非常轻量级。
好了，本期就到这里了，我们下期再见！
关注「jscourse」微信公众号获取更多 JavaScript 相关的课程和学习资源！
