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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,466评论 25 708
  • 原文:http://dmitrysoshnikov.com/ecmascript/javascript-the-c...
    jaysoul阅读 489评论 0 0
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 1,791评论 0 11
  • 《以微薄文字,表述盛大母爱》 下雨了,外面的天空深邃而遥远。如果不是广播站上传来一首歌,我就不会想起那么多。《母亲...
    咚_阅读 274评论 0 0