如何编写更好的CSS

关于如何编写更高效更优雅的CSS代码，网上已经有很多文章了。

但我还是在这里重新总结一下，算是对CSS的温习，也方便以后查找资料。

下面开始正文。

 

 

必不可少的reset.css

不同的浏览器之间，对标签都有设置默认样式，所以需要重置这些影响布局统一性的样式。

reset.css的代码， 可参考YUI的：http://developer.yahoo.com/yui/reset/

 

如果是移动端的web开发，要清除浏览器默认的点击样式，还需加上：

*, ::after, ::before{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
    -o-tap-highlight-color: rgba(0,0,0,0);
    -ms-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}

 

例如Chrome浏览器，有字体最小显示尺寸的设置，默认是12px。

如果希望页面不受这个设置的限制，可以加上下面的代码：

*, ::after, ::before{
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -o-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

 

PS：神奇的是，我刚才在Win7下的Chrome(27.0.1444.3 m)测试，居然失效了！而在手机上测试，则有效。

 　　Chrome升级到27之后的版本，text-size-adjust就已经失效了，无论在手机端还是电脑端。

 

避免使用*(全局)选择器。

我想理由大家都知道了吧？  这玩意很耗性能！

这个时候你肯定想吐槽上面给出的两段css代码。丫的，明明用了*选择器！

好吧，的确是用了。

我个人的建议是：能不用就尽量避免不要用。

因为，既然这个 全局选择器 被设计出来，肯定是有需要的场景。所以，需要用的时候还是要用，但不要滥用！

 

其实，官方文档中貌似没有「全局选择器」这个叫法。

英文是：Universal rules。

直译：通用规则。

我觉得这样比较难理解，所以称为「全局选择器」。 当然，Universal rules 不单单只有 * 号符。

下面这些都是「全局选择器」：

 

[hidden="true"] {…} /* A universal rule */ 
tree > [collapsed="true"] {…} /* A universal rule */
* {…}       /* A universal rule */

 

 

减少没必要的标签

关于这点，很多有经验的前端工程师也时常会犯错。因为这是一个不算坑的坑 : 浏览器对CSS selectors的解释是「从右到左」的。

 

.nav a { ... }

也就是说，上面的代码，是先查找整个页面的a标签，再对 a 标签进行遍历，判断其祖先是否匹配 .nav 。

a标签是这句css表达式的 关键选择器(key selector) 。

 

《编写高效的 CSS》 中直接提到：“样式系统从 关键选择器 开始匹配规则，然后左移(查找规则选择器的任何祖先元素)。只要选择器的子树(substree)一直在检查，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃。”

所以，CSS选择器的层级（匹配规则）越少，解析速度就会越快。

看下面例子：

.btn#search { ... }
.cont ul li.item { ... }
.cont ul li a { ... }

上面的写法，不单单影响性能，还增加了代码量。

理论上(实际还需考虑当前html的代码结构)，可以优化为：

 /* id是唯一的 */
#search { ... }
/* 删掉多余的标签，class和id不要被标签名锁限制 */
.cont .item { ... }
/* 删掉多余的标签，避免层级过多影响性能，一般控制在3层级内。如有特殊需要，请用class替代 */
.cont a { ... }

 

 

利用选择器分组

有人说：对于优秀的程序员，最大的动力是懒惰，因为他们厌倦所有重复性的工作。

但大部分程序员，偷懒的时候，却用Ctrl+C & Ctrl+V 草草了事。

例如写出下面的代码：

.blackBtn {
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    overflow: hidden;
    background-color: black;
}
.redBtn {
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    overflow: hidden;
    background-color: red;
}

当然，上面的代码，我们可以整理为：

.blackBtn, .redBtn {
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    overflow: hidden;
}
.blackBtn {
    background-color: black;
}
.redBtn {
    background-color: red;
}

这样不单单节省了代码，修改起来也更方便。

 

 

利用CSS的继承

这个东西，写CSS无时无刻都会用到，但不少人会忽略了它的存在。

.cont p {
    font-size: 16px;
    color: #333;
}
.cont b {
    font-size: 14px;
    font-weight: normal;
    color: #333;
}

可以优化为：

.cont {
    color: #333;
}
.cont p {
    font-size: 16px;
}
.cont b {
    font-size: 14px;
    font-weight: normal;
}

 

CSS中可以被继承的属性：

azimuth, border-collapse, border-spacing,

caption-side, color, cursor, direction, elevation,

empty-cells, font-family, font-size, font-style,

font-variant, font-weight, font, letter-spacing,

line-height, list-style-image, list-style-position,

list-style-type, list-style, orphans, pitch-range,

pitch, quotes, richness, speak-header, speaknumeral,

speak-punctuation, speak, speechrate,

stress, text-align, text-indent, texttransform,

visibility, voice-family, volume, whitespace,

widows, word-spacing

 

多得有点吓人！但其实这些属性都不要刻意去记住，继承中用得最多的也就是字体属性。

更详细的，可以看一下《CSS样式表继承详解》这篇文章。

 

 

避免使用@import

关于这点，最主要的问题是：影响了css文件的并行加载和加载顺序。

《高性能网站设计：不要使用@import》 中已经谈得十分详细了，我就不多说了。

 

 

禁止使用CSS表达式

以前十分流行用纯CSS的方式来兼容IE6不支持position: fixed这个问题，这其中就用到了CSS表达式。

例如加上类似下面的代码，去兼容IE6。

#fixed {
    /* other css */
    _position:absolute;
    _top:expression(document.documentElement.scrollTop+300); /* 兼容ie6*/ 
}

后来大家发现，这样做是大错特错的。还不如另外用JavaScript去兼容。

因为，CSS表达式的计算频率高得惊人！移动一下鼠标都可达到10000次以上的计算量！

所以，CSS表达式绝对是禁止使用的。

 

 

CSS代码的基本编写规范

这个点我就不细谈了。

但一些通用的规范大家还是要遵守，如良好的缩进和空格分隔。

这样有利于提高代码的可读性。

 

 

代码压缩，更轻更快

为了提高访问速度，gzip和代码压缩是少不了的。

这里推荐两个在线的压缩工具吧：

http://refresh-sf.com/yui/

http://tool.css-js.com/

本地的话，安装YUI Compressor即可。支持JS和CSS的压缩。

 

 

最后

说实话，CSS虽然貌似很“简单”。但要把它写好，也绝不是一件简单的事情。

不少人还会强调一些「可简写」的CSS属性必须简写。 如：padding、font、background等。

的确，简写可以让代码更加简洁，可减少代码量。但我个人觉得，CSS编码中，可读性和解耦也十分重要。

所以，本文没谈到的地方还很多。仅仅对CSS编码优化的一些小技巧进行了总结。

 

最后后

玉伯不断强调：CSS 是一门感性的语言。

对于这点，我不完全认同。

我觉得CSS的感性，是指他可以通过各种各样的组合和方式，去实现想实现的效果。就像文字一样，我们可以用不同的句式去表达同样的意思。它并没有标准的答案，所谓的最佳实践方案，也仅仅是对于特定的场景。

 

 参考：

https://developer.mozilla.org/zh-CN/docs/CSS/Writing_Efficient_CSS

http://css-tricks.com/efficiently-rendering-css/

http://www.qianduan.net/high-performance-web-site-do-not-use-import.html

http://www.cnphp.info/css-style-inheritance.html

 

 

 本文作者：Maple Jan

 本文链接：http://www.cnblogs.com/maplejan/archive/2013/05/12/3074695.html