Disallow adjoining classes (不使用相邻类)

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

相邻类,也可以称之为类链,像.foo.bar .在CSS规范中允许使用,但在IE6即更早版本中可能就不好使了.IE仅仅会以'.bar'的形式匹配选择器,也就是说你的选择器不会按你的套路出牌,顺便出现了跨游览器bugs.(不用IE6的 放心大胆的使用吧)

通常来说,基于单类来定义一个样式要比多类定义更好.可以瞅瞅想想下面的例子:

.foo {
    font-weight: bold;
}
.bar {
    padding: 10px;
}
.foo.bar {
    color: red;
}

选择器.foo.bar的规则,可以用一个新类进行重写:

.foo {
    font-weight: bold;
}
.bar {
    padding: 10px;
}
.baz {
    color: red;
}

那么这个新类,baz,必须添加至原有的HTML元素上.这实际上更利于维护,因为.baz此规则此刻就可以被复用了，而.foo.bar规则只能被用在前一种固有的情况下.

规则详情

规则 ID: adjoining-classes

此规则意在指出 使用相邻类时,在IE6即更早版本时会出现匹配失败的情况。

以下例子将会出现警告:

.foo.bar {
    border: 1px solid black;
}
.first .abc.def {
    color: red;
}

以下例子将不会出现警告:

/* 两个类中间有空格 */
.foo .bar {
    border: 1px solid black;
}