Web前端开发最佳实践总结三：CSS最佳实践

CSS Reset概念

在浏览器中，html的标签是有原始的样式的，这也是标签语义的一种体现，但是这也出现一个问题，那就是在不同的浏览器中，标签的默认样式多多少少都有点差异，其中某些差异会给开发带来了不小麻烦。看如下这段代码：

<input type="search" />
<input type="button" value="button" />

上面两个简单的input标签，然而在IE10、Chrome和Firefox中的表现出现了差异，Chrome浏览器中显示的两个元素之间的距离明显比其余两个要宽，这是由于三个浏览器中的input标签的默认样式margin值不同造成的，解决的办法是重置input的margin：

input{
    margin: 0;
}

而上面的重置input标签的margin就是一种css reset实现

CSS Reset的几种实现方式

曾经火爆一时的方案，总共就只有一行代码，但是该方法有一个致命的缺点：当页面元素很多时就会影响页面渲染的性能，并且对所有的元素需要重新自定义margin和padding（如果需要设置margin和padding为默认时）：

*{margin: 0; padding: 0;}

使用雅虎前端技术团队开发的YUI Reset CSS，官网链接: YUI Reset CSS

给CSS样式定义排序

按照一定的规则排列css样式属性的定义，可以让代码看起来更整洁，并且在后期维护时方便我们自己查看和更改。常用的css样式排序有：

1.按照类型分组排序：著名的web前端专家AndyFord将css样式属性分为了七类：显示与浮动、定位、尺寸、边框相关属性、字体样式、背景、其他样式。我们可以根据这七类依次对css进行划分

2.按照首字母进行排序：忽略浏览器前缀（-moz-、-ms-、-o-、-webkit-），按照属性的首字母进行升序排列

3.按照定义的长度进行排序：这是使用最少的也是最简单的一种排序方式，根据属性的长度进行降序排列

也可以通过CSS排序工具：CSScomb对css文件中的样式属性进行排序，在线使用地址：CSScomb在线工具

CSS样式的权重介绍

CSS权重是相对于类选择器而言的，它代表的是类选择器的优先级，css类选择器分为四种：style内联样式、id、class、标签还有伪类选择器，他们的权值分别为：1000、100、10、1、1，对于一个标签的样式而言，如果设置了两次相同的样式属性不同的值，则权重值最高的优先

合理利用CSS样式的权重

CSS样式中尽量不要使用ID选择器

因为id的值是不允许重复的，如果使用了id选择器就意味着此样式只作用于一个元素，该样式没有办法重用于其他的元素；并且id选择器的权值是很高的，如果要覆盖其样式属性值，就必须在原先使用id选择器的基础上添加新的选择符以提高权值或者使用!important，但是这样会导致无法重用的样式代码越来越多

减少子选择器的层级以降低选择符整体权重

子选择器的层级越小，对HTML结构的依赖也就越低

使用组合的CSS类选择器

其基本思想是，对于一个容器，将容器中的标签元素相同的可继承的样式定义在父容器中，而对于其余需要独立设置的样式属性分别写在各自的样式类中，这一概念来自于面向对象编程的一条原则：少继承，多组合

CSS代码的兼容性（主要IE）

在主流的浏览器中，IE浏览器给前端开发人员留下的印象一直不是很好，尤其是IE8及以下版本的浏览器，兼容性太差的同时还依然有这很高的占有率。并且IE浏览器不会主动为客户升级浏览器，除非手动安装新的浏览器，这也是导致IE旧版本现在市场占有率依旧很高的一个主要原因。

自然，前端开发就必须要考虑到如何兼容这些旧版本的浏览器了。我们称用于兼容旧浏览器而额外添加的代码为hack代码，这一类代码也是最不易理解和维护的。而对于这一类代码，如果编写过多，会大大降低css文件的易读性，因此，可以为不同的就浏览器提供不同的样式文件以达到兼容代码和正常代码分离的目的。实例代码如下：

<!--[if IE 7]<<link rel="stylesheet" href="ie7.css" type="text/css" charset="utf-8"/><![endif]-->
<!--[if IE 8]<<link rel="stylesheet" href="ie8.css" type="text/css" charset="utf-8"/><![endif]-->
<!--[if gt IE 8]><!--><link rel="stylesheet" href="ie9.css" type="text/css" charset="utf-8"/><!--<![endif]-->

高效的CSS选择器

高效的CSS选择器的概念是什么？简单来说，就是能被浏览器快速解析和匹配的CSS选择器。看下面这个例子：

.main div.list p{...}
.main .main-body{...}
#main_container{...}

上面定义了三个选择器，假设它们应用的都是相同的元素，那么效率最高的是哪个呢？想要知道这个答案首先需要理解浏览器是如何解析CSS选择器的。对于第一个选择器，我们一贯的想法是这样的：先解析.main元素，然后找到这些元素中具有list的类名的div元素，最后从这些div元素中找到所有p元素。不过，浏览器真的是这样从左到右解析的吗？其实不是的，实际上，CSS选择器的匹配原理刚好相反，他是从右往左进行解析匹配的。也就是说第一个选择的解析过程是这样的：先找到所有的p元素，然后找到满足父元素为list类名的div元素的p，最后找到满足父元素为main类名的元素。

所以按照浏览器的CSS选择器的解析方式来说，第三个性能最好，第一个性能最差，因为第三个的解析步骤最少，第一个最多。因此我们在定义选择器时，应该尽量让第一次匹配时的数量达到最少，并且让整体的匹配查找次数最少。

如何定义高效的CSS选择器

1. 避免使用通配符*

因为通配符会匹配页面中所有的元素，匹配的计算量是最大的。如果不是特殊情况，在选择器中不要使用通配符

2.避免使用标签选择器以及单个属性选择器作为关键选择器

这里首先要解释一下什么叫做关键选择器，关键选择器指的是最右边的选择器。因为最右边的选择器决定着初始匹配的元素数量。

相比于使用ID选择器和类选择器，使用标签选择器和单个属性选择器做为关键选择器在进行匹配时会命中更多的元素，计算量也相对大些。使用单个属性选择器，会在所有的标签上查找这个属性，其计算量等同于使用通配符

使用单个选择器的测试代码
.main div.list [data-link="myname"]{
    ...
}

3.不要在ID选择器前面使用标签名等

因为页面中的id的值都是唯一的，所以在前面加上标签名或者加上其余的层级选择器后面是多余的，同时还会增加匹配计算的时间（虽然id是唯一的，但是如果前面还有选择器，浏览器还是会继续解析下去）

4.尽量不要在选择符中定义过多的层级，最好不要超过三级

选择器的层级关系也是DOM树层级关系的体现，选择器的层级越少，则对应的css样式与页面的DOM结构的耦合就会更松。

CSS对图片的处理

不要设置图片的尺寸

开发人员在样式中设置图片的尺寸，是因为原始图片的尺寸并不符合页面设计的要求。然而在这一过程中，利用样式缩放图片会带来CPU的额外计算过程，增加了图片在浏览器中的渲染事件。超出实际尺寸的图片，其网络传输的过程也会占用更多的带宽，增加了下载时间。因此，在制作图片时，尽量按照实际需要的尺寸进行制作。在设置缩略图的时候，缩略图和实际图不要使用相同的图片通过设置图片的尺寸实现，最佳的做法是针对原始图片，单独做一套缩略图。

使用雪碧图技术CSS Sprite

通过使用雪碧图技术，可以将多张图片合并成一张图片，从而减少http请求次数，减少了页面的延迟时间。

然而雪碧图还是存在着很多的缺点：开发过程繁琐（需要将多个图片合理的合并成一个图片，并且设置相同的margin以便于设置background-position）、维护过程复杂（要尽量保证图片中已有的图标位置不能改变，否则页面的显示将会出现难以预料的后果）

雪碧图合并通常用于合并小图标，比如首页mark图标、下载上传mark图标等

参考文献

Web前端开发最佳实践一书