编写更好的CSS(1/3)

本篇文章主要介绍了"编写更好的CSS"，主要涉及到box-shadow,选择符,html代码方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 编写好的CSS代码能提升页面的渲染速度。本质上，一条规则都没有引擎解析的最快。MDN上将CSS选择符归拆分成四个主要类别，如下所示，性能依次降低。ID 规则Cl...

编写好的CSS代码能提升页面的渲染速度。本质上，一条规则都没有引擎解析的最快。MDN上将CSS选择符归拆分成四个主要类别，如下所示，性能依次降低。

1. ID 规则
2. Class 规则
3. 标签规则
4. 通用规则

对效率普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始的，虽然Souders的书中罗列的非常详细，你可以在这里查看完整列表引用。你也可以在谷歌的高效的CSS选择器的最佳实践中查看更多的细节。

本文我想分享一些我在编写高性能CSS中用到的简单的例子和指导方针。受MDN的编写高效的CSS指南的启发，并遵循类似的格式。

避免过度约束

作为一般规则，不添加不必要的约束。

// 糟糕
ul#someid {..}
.menu#otherid{..}

// 好的
#someid {..}
#otherid {..}

后代选择符最烂

不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。

// 烂透了
html div tr td {..}

避免链式（交集）选择符

这和过度约束的情况类似，更明智的做法是简单的创建一个新的CSS类选择符。

// 糟糕
.menu.left.icon {..}

// 好的
.menu-left-icon {..}

坚持KISS原则

想象我们有如下的DOM：

    
Twitter
    
Facebook
    
Dribbble

下面是对应的规则……

// 糟糕
#navigator li a {..}

// 好的
#navigator {..}

使用复合语法

尽可能使用符合语法。