前端优化--高性能的CSS

我觉得在学习前端中，CSS的学习应该是相对比较简单的，也是入门比较快的，那么如何写出高性能的CSS呢？我们应该知道在前端开发中，HTML和CSS代码 的可读性和可维护性是非常重要的，那么我们在保证可读性和可维护性的前提下，如何让代码的解析速度更快呢？

1 首先使用高效的CSS选择器

关于高效的CSS选择器，用三个例子作比较：
1 .get .list div
2 .get .list-item
3 #getcode

那么分析一下，上面的三个css选择器哪个效率更高呢？在此之前先说一下CSS选择器在匹配中经历了哪些步骤，首先CSS选择器的匹配原理是从又到左的，拿上面第一个解释首先选择器先找到所有的div标签元素，再查找元素是否存在具有list类的父元素，然后再查找这些父元素中是否存在get类的父元素。
可想而知第一个的效率最差，第三个的效率最高，用ID选择器在整个页面中具有唯一性，查找到速度最快，并且查找的次数最少，性能最好。

2 CSS选择器遵循一些最佳原则
（1）避免使用通配符*
通配符*使用表示在加载页面的时候用来皮匹配所有的元素，避免使用通配符给页面加载增加大量负担。

//避免这样使用
*{
	font-size:14px;
}

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

//不建议用法
 .get .list div {
	font-size:14px;
}
 .get .list [date-link = "#red"]{
	color:000;
}

（3）避免在ID选择器前使用标签名

//避免这样使用
div#getcode{
	color:#f00;
}

（4）尽量不要在选择器中定义过多的层级增加查找负担

//避免这样使用
.get>.outest>.lists>ul>li{

}

3 优化CSS代码量
（1）定义简洁的CSS规则。
（2）合并相关CSS规则。

 比如margin-top,margin-right,margin-bottom,margin-left 
 .item{
	margin-top:10px;
	margin-right:10px;
	margin-bottom:10px;
	margin-left:10px; 
}
合并成
.item{
	margin:10px;
}

(3)定义简洁的属性值

//将
 .item{
	margin:0px;
	color:#FFFFFF;
	font-size:0.8em;
}
//修改为
 .item{
	margin:0;
	color:#FFF;
	font-size:.8em;
}

（4）合并相同的定义。
比如

 .item{
	margin:10px;
	color:#000;
}
 .get{
	margin:10px;
	color:#FFF;
}
修改为
 .item, .get{
	margin:10px;
}
 .item{
	color:#000;
}
 .get{
	color:#FFF;
}

4 让CSS样式与HTML结构分离
CSS样式与HTML结构解耦，CSS样式单独在一个样式文件中，只需在HTML中的head标签中用

<link rel="stylesheet" href="css文件路径">引用css样式即可