×

听说过用 CSS 来校验 HTML 代码吗? - 草稿

96
goddyzhao
2018.06.28 20:16 字数 1090

我们写 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 相关的课程和学习资源!

jscourse
Web note ad 1