Disallow selectors that look like regular expressions (不允许选择器类似与表达式)

文章为csslint中文版译文，点击原文可查看英文版，如遇到翻译错误或错别字啥的，请留言指出~ 译文内容不定期更新~ 返回目录

CSS3增加了复杂的属性选择器使得我们可以根据表达式来匹配属性值。这系列的选择器有着性能的影响,表达式匹配与简单的类名匹配相比速度要慢。在诸多场景里,是使用一个不确定值的选择器还是简单的给元素增加一个类名选择器还在讨论中。这里有几种需要注意的属性选择器。

如属性选择器仅包含属性本身,则此属性选择器实际上没有性能问题。举个例子,以下选择器仅匹配 <a>元素定义了href属性:

//OK
a[href] {
    color: red;
}

此属性选择器能正常使用并且也不会造成任何性能问题。

如属性选择器使用确定的值作为匹配条件,则此属性选择器也是没问题的。举个例子,以下选择器仅匹配<a>元素的rel属性值为 "external" :

//OK
a[rel=external] {
    color: blue;
}

除以上两种情况,其它条件下使用属性选择器会造成性能问题。各属性选择器都有着类似的基本格式,在元素名称后使用方括号,与等号组合成的标识符,来进行表达式匹配。

包含

第一类"问题"选择器是包涵选择器。选择器使用 *=来匹配属性值中包涵给定的字符串元素。工作原理类似与JavaScript中indexOf()方法,只要检索的值出现在属性值的任意位置即可,例子如下:

a[href*=yahoo.com] {
    color: green;
}

此选择器匹配任何<a>元素的href属性值中有字符串 "yahoo.com"的条件。如下示例将匹配此条件:

<a href="http://www.yahoo.com/">Yahoo!</a>

<a href="http://www.google.com/redirect=www.yahoo.com">Redirect to Yahoo!</a>

<a href="http://login.yahoo.com/">Login to Yahoo!</a>

注意不必担心字符串两边是否有空格,因为只做部分匹配。

开始为

接着需要"避免使用"的选择器是开始为匹配。选择器使用^=操作符来匹配属性值以给定的字符串开头元素。例子如下:

a[rel^=ext] {
    color: red;
}

此规则将匹配如下示例:

<a href="http://www.example.com" rel="external">Example</a>

<a rel="extra">Extra! Extra!</a>

<a rel="extreme">Extreme</a>

所有的选择器只关注字符串"ext"是否在rel属性值的起始位置。

结尾为

接着需要"避免使用"的选择器是结尾为匹配。选择器使用$=操作符来匹配属性值以给定的字符串结尾元素。例子如下:

a[href$=.html] {
    color: blue;
}

此规则匹配所有 <a>元素以其href属性值为.html结尾的条件。以下示例将匹配:

<a href="index.html">Home</a>

<a href="http://www.example.com/example.html">Example</a>

单词匹配

检查被空格间隔开的属性值,是更为复杂的选择器。选择器使用 ~=操作符来匹配属性值必须包涵给定的单词,换句话说,属性值匹配给定单词的同时,属性值本身还须被空格所间隔开。示例如下:

a[rel~=external] {
    color: red;
}

此规则将匹配如下例子:

<a href="http://www.example.com" rel="external">Example</a>

<a href="http://www.example.com" rel="external me">Example</a>

<a href="http://www.example.com" rel="reference external">Example</a>

<a href="http://www.example.com" rel="friend external me">Example</a>

包涵破折号

最后一个"问题"选择器是检查属性值中的字符串中是否被破折号分隔。|=用来找字符串的内部是否有xxx-yyy-zzz格式的字符串,例子如下:

a[data-info|=name] {
    color: red;
}

它将匹配如下示例:

<a data-info="name-address-phone">Info</a>

<a data-info="address-name-phone">Info</a>

<a data-info="address-phone-name">Info</a>

性能问题

以上所有这些复杂的属性选择器都须通过一遍又一遍的计算来匹配对应属性值,从而确保最终的显示效果正确。为此,CSS需要开销更多的时间,来计算整个页面的显示效果。

规则详情

规则 ID:regex-selectors

此规则意在标识出存在影响性能问题的潜在选择器。为此,规则在发现选择器使用 *=,|=,^=,$=,~=提示警告。

以下示例提示警告:

.mybox[class~=xxx]{
    color: red;
}

.mybox[class^=xxx]{
    color: red;
}

.mybox[class|=xxx]{
    color: red;
}

.mybox[class$=xxx]{
    color: red;
}

.mybox[class*=xxx]{
    color: red;
}

以下示例不会提示警告:

.mybox[class=xxx]{
    color: red;
}

.mybox[class]{
    color: red;
}

Disallow selectors that look like regular expressions (不允许选择器类似与表达式)