高效CSS开发核心要点

标签： CSS CSS技巧 HTML/CSS | 发表时间：2012-05-05 12:18 | 作者：Rainbow
出处：http://blog.moocss.com

本文参考了业界规范及主流趋势，详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题，希望对您有所帮助，也可收藏作为参考。

本文来源：http://www.ituring.com.cn/article/1745

1. 基本原则

1.1 把CSS放在HTML页面头部

由于浏览器需要在所有的样式表加载完成后才能开始渲染页面，样式表加载完成之前页面会一直显示空白，因此需要将样式表放在头部。

@import 相当于把 标签放在页面的底部，因此从优化性能的角度考虑，应避免使用 @import。

1.2 避免使用 CSS Expressions

Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

1.3 CSS简写

1.3.1 16进制颜色值简写 

1
2
3
4
5

/* Not recommended */
color: #eebbcc;
 
/* Recommended */
color: #ebc;

1.3.2 属性值简写 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

 margin-top: 2px;
 margin-right: 5px;
 margin-bottom: 2em;
 margin-left: 15px;     ----->>     margin: 2px 5px 2em 15px; 
 
 border-width: 1px;
 border-style: solid;
 border-color: #000     ----->>     border: 1px solid #000 
 
 font-style: italic;
 font-variant: small-caps;
 font-weight: bold;
 font-size: 1em;
 line-height: 140%;
 font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief 
 
 background-color: #f00;
 background-image: url(background.gif);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: 0 0;   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 
 
 list-style-type: square;
 list-style-position: inside;
 list-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)

1.4 尽量抽取相似部分

1
2
3
4
5
6
7
8
9
10
11
12

.class1{position: absolute; left: 20px; top: 30px;}
.class2{position: absolute; left: 20px; top: 30px;}
.class3{position: absolute; left: 20px; top: 30px;}
.class4{position: absolute; left: 20px; top: 30px;}
.class5{position: absolute; left: 20px; top: 30px;}
.class6{position: absolute; left: 20px; top: 30px;} 
 
 -------------------->>>>>>> 
 
 .class1 .class2 .class3 .class4 .class5 .class6{
        Position: absolute; left: 20px; top: 20px;
 }

2. 关键要点

2.1 只使用小写

1
2
3
4
5

<!-- Not recommended -->
<A HREF="/">Home</A>
 
<!-- Recommended -->
<img src="google.png" alt="Google">

2.2 不要有多余的空格（划线处）

1
2
3
4
5

<!-- Not recommended -->
<p>What?_
 
<!-- Recommended -->
<p>Yes please.

2.3 使用utf8编码

1
2
3
4
5

html中：
<meta charset="utf-8"> 
 
css中：
@charset "utf-8";

2.4 使用 html5文档类型

2.5 验证HTML与CSS文档

验证HTML

验证CSS

2.6 使文档语义化

1
2
3
4
5

<!-- Not recommended -->
<div onclick="goToRecommendations();"<All recommendations</div<
 
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

2.7 多媒体（多终端）兼容

1
2
3
4
5

<!-- Not recommended -->
<img src="spreadsheet.png">
 
<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

2.8 不要使用实体引用

1
2
3
4
5

<!-- Not recommended -->
The currency symbol for the Euro is “&amp;eur;”.
 
<!-- Recommended -->
The currency symbol for the Euro is “€”.

2.9 使用带有语义的id和class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/* Not recommended: meaningless */
#yee-1901 {}
 
/* Not recommended: presentational */
.button-green {}
.clear {}
 
/* Recommended: specific */
#gallery {}
#login {}
.video {}
 
/* Recommended: generic */
.aux {}
.alt {}

2.10 省略零值的单位

1
2

margin: 0;
padding: 0;

2.11 省略起始的零

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

font-size: .8em;
</code>
<h3>2.12 尽量避免CSS hacks</h3>
 
<p>尝试换种解决方案 </p>
 
<h3>2.13 为末尾的声明添加分号</h3>
 
<p>尽管省略末尾分号可以省略一个字节，但是非常不利于团队维护，得不偿失 </p>
 
<pre lang="css" line="1">
/* Not recommended */
.test {
  display: block;
  height: 100px
}
 
/* Recommended */
.test {
  display: block;
  height: 100px;
}

2.14 选择器的效率

浏览器是“从右往左”来分析 class 的，对于下面的规则 

1

#god > li {font-weight: bold}

浏览器会先查找页面上所有的“li”节点，然后再去做进一步的判断：如果它的父节点的 id 为“god”，则匹配成功。由此可知，CSS 选择器的匹配远比我们想象的要慢的多，CSS 的性能问题不容忽视。

2.15 后代选择器

1

#toc li {font-weight: bold}

这个效率比之前的“child selector”效率更慢，而且要慢很多。浏览器先便利所有的“li”节点，然后步步上溯其父节点，直到 DOM 结构的根节点（document），如果有某个节点的 id 为“toc”，则匹配成功，否则继续查找下一个“li”节点。

2.16 尽量避免全局选择器

1

[hidden="true"] { ... } /* A universal rule */

这里的匹配规则很明显：查找页面上的所有节点，如果有节点存在“hidden”属性，并且其属性值为“true”，则匹配成功。这是最耗时耗力的匹配，页面上的所有节点都需要进行匹配运算，这种规则应尽量避免。

是用星号也一样 

1

#god li *

先找到页面上的所有元素，再匹配祖先中包含li的元素，然后在这些元素中再查找父元素的id为god的元素。

因此，对于全局选择器，只建议一种用法： 

1

* { margin: 0; padding: 0; /* etc. */ }

2.17 避免tag+id或者class+id

1
2

button#goButton {...};----->>#goButton
.fundation#testIcon {...};----->>#testIcon

2.18 关于tag+class

1

button.indented {...}----->>.button-indented {...}

程序员们经常会给某个 Class 前面加上标签名称（Tag Name），以更精确且快速的定位该节点，但是这样往往效率更差。因为页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免由于开发修改页面元素的类型（Tag）而导致的样式失效的情况，做到样式与元素的分离，两者独立维护。

2.19 尽量减少规则数量

可以考虑将层级关系写到一个class中，不过在层级变动时就比较麻烦了 

1
2
3
4
5

Span[mailfolder="true"] > table > tr > td.columnClass {...} 
 
------------------->>>>>>> 
 
.span-mailfolder-tbl-tdCol {...}

2.20 避免过长的class命名

可以考虑缩写 

1
2

ocHeroImage
ocEmailAddress

如果觉得难以理解，可以加入连字符或注释 

1
2

oc-HeroImage
oc-EmailAddress

尽管有语义化方面的考虑，但命名还是尽量短一些，只要易于辨认即可 

1
2

heroImg
emailAddr

2.21 文件名中不应有空格

a) 有空格的文件名会被Google当成两个关键字，可能带来更多的搜索结果，引来更多流量，是好事

b) 有空格意味着不能省略引号，多了两个字节

c) 空格会被浏览器自动转换为%20，老的浏览器可能不支持，如果将%20硬编码到URL中则每个实例中都多了两个字符 

1

input {background: url("/images/shadow background.gif");}

2.22 省略URI的引号

1

@import url(//www.google.com/css/go.css);

2.23 尽量避免后代选择器

1

treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}

Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。

2.24 充分利用继承机制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 Color
 font
 letter-spacing
 line-height
 list-style
 text-align
 text-indent
 text-transform
 white-space
 word-spacing 
 
 #bookmark  > .menu-left {list-style-image: url(blah)} 
 
 ------------>>>>>>>> 
 
 #bookmark  {list-style-image: url(blah)}

2.25 发布之前一定要进行压缩

可使用 YUI Compressor或类似软件进行压缩后再发布。

3. 高级技巧

3.1 省略嵌入资源的协议

即可避免混合内容问题（mixed content issues）也可以缩减文件大小 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- Not recommended -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
 
<!-- Recommended -->
 
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}
 
/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}

3.2 省略可选的标签

HTML5规范中指定了一些可以省略的标签，可以缩减文件大小 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>
 
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

3.3 文件结构

由于图像等资源一般只有CSS文件使用，故可将图像文件夹放到CSS文件同级目录，这样就可使用相对路径，节省字节数 

1

input {background: url("images/shadow background.gif");}

3.4 文件夹命名

通常文件夹会被命名为其所代表的资源的复数形式 

1
2
3

images
assets
fonts

其实大可不必，使用单数形式可以节省许多字节，尤其是当每个项目的结构都类似时 

1
2
3

img
asset
font

对于下面一段包含58字节的代码： 

1

input {background: url("/images/shadow background.gif");}

优化后变为52字节，即10%的压缩： 

1

input {background: url(img/shadow-background.gif);}

如果在使用缩写，则可进一步缩减： 

1

input {background: url(img/shadow-bg.gif);}

如果一个项目有几百行这样的代码，那么就会节省几百字节了。如果站点访问量超大，则可节省数目客观的带宽资源。

3.5 末尾声明的分号

前面提过，去掉末尾声明的分号可以节省字节，但不利于维护。可以考虑在压缩发布阶段去掉。 

1
2
3

.clear {clear:both;}
 
.clear {clear:both}

3.6 背景色简写

背景色简写也可节省字节，但要慎用，因为省略掉的默认属性会覆盖前面的属性。 

1
2
3

background-color: blue;
 
background: blue;

3.7 滤镜简写

1
2
3
4

selector {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
}

filter的版本是IE8以下的，–ms-filter的版本是IE9以上的，YUI会将其压缩为： 

1
2
3
4

selector {
    -ms-filter:"alpha(opacity=65)";
    filter:alpha(opacity=65);
}

由于YUI的广泛使用极其社区开发着的强大力量，说明这种写法已经是经过深度测试的写法，可以放心使用。

3.8 Gzip压缩与CSS书写

Goolge建议按照字母顺序书写CSS规则，方便维护。其他公司也有自己的规范。从Gzip压缩角度，只要整个文档中的书写顺序保持一致即可，可以提高Gzip压缩比率。 

1
2
3
4
5
6
7
8

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

3.9 更少的请求比更小的尺寸重要

文件可以适当的合并，只保留基本的层级即可 

1
2
3

<link rel="stylesheet" href="http://css.somedomain.com/reset.css" type="text/css" />
<link rel="stylesheet" href="http://css.somedomain.com/global.css" type="text/css" />
<link rel="stylesheet" href="http://css.somedomain.com/home.css" type="text/css" />

参考资料：

相关日志 »

相关 [css 开发 核心] 推荐：

高效CSS开发核心要点

- - blog.moocss.com
本文参考了业界规范及主流趋势，详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题，希望对您有所帮助，也可收藏作为参考. 本文来源：http://www.ituring.com.cn/article/1745. 1.1 把CSS放在HTML页面头部. 由于浏览器需要在所有的样式表加载完成后才能开始渲染页面，样式表加载完成之前页面会一直显示空白，因此需要将样式表放在头部.

(转)豆瓣css开发规范

- Hu DongHai - 小豪~麦穗的部落格
今天无意间看到了豆瓣的一些前端开发规范，攻城师作战指南. 里面的Javascript代码风格规范 差不多就是基本的javascript规范，主要还是分享一下 css部分的规范. 因为规范是在google docs上，需要穿过篱笆，所以我就直接帖过来了，一起学习一下哈. ——————————————–华丽的分割线————————————————.

10 个加速 CSS 开发的框架

- Tairan Wang - ITeye资讯频道
CSS 可以做很多事情，但开发者更习惯的是变量、常量和一般的更快速的语法，而 CSS 本身是不支持的. 本文介绍了 10 个 CSS 预处理器，让 CSS 支持一些简单的编程语法，使Web开发更高效. Compass 是一个开源的 CSS 制作框架. 针对个人框架开发时，其非常简单、易用. 这是一个很棒的 CSS 预处理器，可以让开发者制作插件，要求 PHP 以及 Apache (mod_deflate 和 mod_rewrite).

网易邮箱的CSS开发（一）

- - 博客 - 伯乐在线
网易邮箱是个庞大而且细节繁多的系统，注定了前端开发中样式管理的复杂程度非常高. 如果没有一个合理的体系来管理样式，开发和维护的难度是不可想象的. 从极速3.5版本开始，我们就一直遵循并不断改善这套规则，现在就来分享一下~. 在错综复杂的样式面前，CSS显得过于简陋. 于是我们不得不人为的加上一些思维方式和规则来帮助我们管理样式.

css核心-盒子模型（Box Model）整理

- - CSDN博客Web前端推荐文章
1、对盒子模型的不同解释.      这里IE6、IE8、IE9相同，火狐和谷歌、遨游等相同. 先说盒子模型，CSS将所有的HTML块元素都看成是一个盒子（box),每个盒子有以下几个组成部分：Content(内容）、Padding（补白）、Border（边框）、Margin（边界）. 火狐谷歌等较新的的浏览器实行加法运算，“向外扩张”.

50 款简化 CSS 开发的实用工具和生成器

- - 畅之部落格
这些CSS工具都是很适合网页设计题使用，已经为大家分好类别，请自行点击导航快速浏览：. CSS Sprites | CSS精灵. 网格和布局，CSS 优化，CSS 菜单工具，CSS 按钮，CSS 圆角，CSS 框架，CSS Sprites，CSS 排版以及 CSS 表单. 新颖的 CSS 网格工具，可用于简化内容管理系统的页面模板，轻巧易用.

13个最常用的CSS和HTML快速开发工具

- - ITeye资讯频道
英文原文： 13 Most Used Speedy Tools To Write CSS And HTML Code. CleverCSS是个用于CSS开发的小型标记语言，从Python中得到灵感. 可以开发出干净、结构清晰的样式表. 在许多方面它比CSS2都更简洁、强大. 它与CSS最明显不同之处在于语法：CleverCSS采用了缩进式语法而不是对齐.

Web 开发中 20 个很有用的 CSS 库

- - Web前端 - ITeye博客
在过去的几年中，CSS已经成为一大部分开发者和设计者的最爱，因为它提供了一系列功能和特性. 每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发. 像CSS 库，框架，应用这样的工具能够为开发者做很多事，而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库，它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.

从事前端开发必须要了解的CSS原理

- - IT瘾-geek
　　从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢. 当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢. 　　一、浏览器的发展与CSS. 　　网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页， HTTP 容许网页浏览器送交资料到网页服务器并且获取网页.

软件开发的核心

- - 博客园_知识库
　　「我们一直这样做开发，时间做久了，便忘了当初的本意. 　　有关软件系统开发，我们谈些什么. 　　我们谈过程，编码规范、开发流程、同行评审、结对编程、持续集成，从瀑布到敏捷再到极限编程. 　　我们谈架构，企业级、J2EE、容器化、SOA（面向服务架构）、Microservices（微服务化）. 　　我们谈规模，大容量、高并发、大数据.