Web前端开发最佳实践总结三：CSS最佳实践
CSS Reset概念
在浏览器环境中，默认情况下HTML标记带有内置样式以确保跨平台显示一致性这也是遵循W3C标准的一部分然而各不相同的浏览器环境下这些默认样式在不同浏览器之间还是存在一定差异的这种差异往往会给前端开发带来诸多不便以下是一段具体的代码片段供参考：
<input type="search" />
<input type="button" value="button" />
代码解读位于页面顶部的两个基本input标签，在IE10、Chrome和Firefox浏览器中显示效果存在差异。在Chrome浏览器中观察到这两个元素之间的间距明显大于其他两种浏览器。这是因为三个主流浏览器设置输入字段时使用的默认间距参数不同所导致的。要解决这个问题的方法是重置所有输入字段的边距属性：
input{
margin: 0;
}
代码解读而上面的重置input标签的margin就是一种css reset实现
CSS Reset的几种实现方式
曾经一度非常流行的方案，在代码量上其实非常简洁仅为一行代码然而该方法存在一个严重的缺陷就是在处理大量页面元素时会显著影响其渲染效率并且必须为每个元素单独定制边距和内联间距若希望 margin 和 padding 设置为默认值时则需重新进行定制
*{margin: 0; padding: 0;}
代码解读基于雅虎前端技术团队开发的YUIResetCSS
给CSS样式定义排序
遵循特定顺序组织css样式属性定义能够让代码呈现更有序的状态，并在后期便于我们直接查看和修改样式设置。常见的css样式排序方法主要包括以下几种：默认位置是最基本的安排标准；内部表单布局适用于大多数元素；外部表单布局则用于表格或块级元素；此外还有特殊的情况如固定位置等也需要考虑进去。
按照类型分组排序：知名的web前端专家Andy Ford将css样式属性划分为七个类别：展示和浮动、定位、尺寸、边框相关属性、字体样式、背景以及其他样式。我们可以通过这七个类别来系统地组织CSS。
按照类型分组排序：知名的web前端专家Andy Ford将css样式属性划分为七个类别：展示和浮动、定位、尺寸、边框相关属性以及字体样式等七个方面进行分类整理。我们可以通过这七个类别来系统地组织CSS代码以达到更好的视觉效果。
2.遵循首字母顺序排列：在不考虑浏览器前缀（如-moz-、-ms-、-o-、-webkit-）的情况下，依据属性的英文名称按升序排列
第三步：依照属性长度进行降序排列：这是一种最为基础且最简单的排序策略，在处理数据时优先考虑这一方法
除了传统的CSS优化工具外
CSS样式的权重介绍
CSS权重相对于类选择器而言是一种衡量机制，在样式表中用于决定不同选型之间的优先级关系。css类选择器主要包含以下几种类型：style内联样式、id、class、标签以及伪类选择器。它们各自的权值具体为：style内联样式为1000分单位，默认情况下id选型为1个单位，默认情况下class选型为十分之一单位，默认情况下标签选型为百分之一单位以及默认情况下伪类选型也为十分之一单位。当一个元素同时拥有多个样式的属性时，则遵循权重较高的规则进行应用。
合理利用CSS样式的权重
CSS样式中尽量不要使用ID选择器
由于每个元素只能有一个唯一的ID，在应用ID选型器时该样式仅影响单个元素；然而由于ID选型器默认具有较高的优先级（weight），若想覆盖原有的样式的属性，则需在原有规则基础上添加新的选型项来提升其优先级等级或明确性指针（!important）。这种做法将导致大量不可复用的样式的产生。
减少子选择器的层级以降低选择符整体权重
子选择器的层级越小，对HTML结构的依赖也就越低
使用组合的CSS类选择器
其核心理念在于，在一个容器内对具有相同标签元素且可继承样式特征的元素进行集中管理与分配，并为那些需要独立配置的样式属性单独设立于各自的样式类别中。这一理念源自于面向对象编程领域的一个核心原则：少继承、多组合。
CSS代码的兼容性（主要IE）
在主流 browsers 中，并非前端 devs 对 IE 浏览器留下的良好印象。尤其以 IE8 及更低版本著称, 其糟糕的 compatibility 问题与之相伴而生的同时, 却仍占据着相当大的市场份额。而且它不会主动为用户提供 browser 升级服务, 直到用户主动选择重新安装最新版本才完成更新
在前端开发中要考虑如何让旧版本的浏览器也能正常工作。我们将那些用于兼容旧浏览器而额外添加的功能称为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样式选择器，并假设这三个样式都作用于相同的父级元素。那么，在这三个选项中效率最高的应该是哪一个呢？要确定答案首先要了解浏览器在处理这些样式时所遵循的具体逻辑机制。当我们最初分析第一个选定时，并不是简单地按照从上至下的顺序来进行定位和匹配操作——虽然直觉上我们会认为这种线性扫描的方式是最直接的方式。然而实际情况并非如此——实际上，并非是从左到右按顺序处理每一个样式的选择范围范围而是采用了一种完全不同的策略模式具体来说就是采用了一种逆序遍历的方法即从后往前依次进行匹配这一机制使得整个过程更加高效准确并能够更好地适应复杂的多层级样式树结构这一特性也为现代网页开发带来了更多的灵活性与可扩展性
从浏览器CSS解析器的工作原理来看，在分析不同选择器的表现时我们会发现：第三个选项表现最优而第一个表现最差；这是因为第三个选项在解析过程中涉及的步骤数量较少而第一个选项则需要较多步骤。因此，在设计CSS选择器时我们应当尽量使首次匹配的选择项数量最少，并尽量减少整体匹配查询次数。
如何定义高效的CSS选择器
1. 避免使用通配符*
由于通配符会在页面上匹配所有存在的元素，并由此导致较大的匹配计算量。因此，在选择器设计时应避免使用通配符除非面对特殊情形
2.避免使用标签选择器以及单个属性选择器作为关键选择器
为了更好地理解，请先明确什么是关键选择器。其本质特征在于位于最右侧的位置。由于位于最右端的选择器决定了初始匹配时所包含的元素数量
相较于仅依赖ID和类信息的策略，在执行匹配操作时能够捕获更多的目标元素，并且计算负担也随之增加。相比之下，在逐一检查每个标签上的属性值来确定符合条件的元素时其计算复杂度与通配符的选择方式相当
使用单个选择器的测试代码
.main div.list [data-link="myname"]{
...
}
代码解读3.不要在ID选择器前面使用标签名等
由于页面中的每个元素都有唯一的id值，在此基础之上附加标签名称或其他层级选择器并非必要且多余的操作；此外还需要注意的是这样的做法不仅会浪费时间（虽然id是唯一的），但如果页面中存在其他层级的选择器，则这些额外的选择器并不会影响最终的匹配结果
4.尽量不要在选择符中定义过多的层级，最好不要超过三级
选择器所处的层次关系实际上反映了整个DOM树层次结构的关系，在此过程中若选择器所处层次数量减少，则在某种程度上与其所属网页中的CSS样式与其所在的DOM结构之间产生了一定程度上的解耦现象
CSS对图片的处理
不要设置图片的尺寸
在样式表中对图片的尺寸进行配置是为了满足页面设计的需求。然而，在这一过程中可能会导致计算机处理时占用更多资源。超出实际显示尺寸的图像在生成网络传输过程中的延迟会增加带宽消耗。为了优化效果，在制作图像文件时应尽量按照需求的实际尺寸进行处理。建议在生成缩略图时避免使用与原图相同的文件名，并通过样式表单独管理每张图片的缩放比例。
使用雪碧图技术CSS Sprite
借助雪碧图技术的应用，在整合多幅图像方面展现出显著优势；实现了多张图像的合并，并降低了http请求的数量；进一步提升了网页加载的时间效率
然而雪碧图仍然存在不少问题：开发耗时长（必须采用恰当的方式将多个图像整合为单一图像文件，并且设定一致的 margin 参数以便实现 background-position 的配置）、维护难度大（必须防止在图像处理过程中变更原有图标的位置坐标值）
雪碧图整合主要用于整合小图标,例如首页mark图标以及文件传输中的上传操作等