如何书写高效的css样式？
有以下四个关键要素：
1.高效的css
2.可维护的css
3.组件化的css
4.hack-free css
书写高效的css：
1.使用外联样式替代行间样式或内嵌样式(不建议使用@import外联方式)
2.使用继承(比如字体、字号属性，可以在body的css样式中规定，有特定的变化，再针对该元素书写。并非特指使用inherit属性)
3.使用多重选择器
示例：h1,h2,h3,...,a{color:#333}
4.使用多重声明(同一元素的样式设置，在一对{}中写完)
5.使用简记属性
示例：a{font:bold 14px/20px Verdana, Arial, Helvetica, sans-serif;}
分别表示：加粗;字号14px;行高20px;字体
6.避免使用!important属性，特定情况下可以使用以下方式加高权重级别
示例：body #content{...}
书写可维护的css：
书写可维护的css，可以让后续维护人员更容易理解我们书写的样式代码。
1.在样式表的开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息
示例：/*------------------------------------
创建时间：2015.10.16
创建者：
----------------------------------------*/
2.包括公用的颜色标记
示例：body{color:#333;}
a{color:#333;}
a:hover{color:#ff3300;}
3.给ID和class进行有意义的命名
4.将关联的样式进行整合
示例：#nav{...}
#nav ul{...}
#nav ul li{...}
5.给样式添加清晰的备注
示例：/*---------header start---------------*/
.........................
/*---------header end---------------*/
6.组件化css
将css样式表拆分成独立的css样式文件：header.css footer.css common.css content.css container.css等等，拆分之后方便css样式的维护管理。
Hack free css：
如何处理IE浏览器的兼容性问题，一直困扰着前端工作者。如果使用css hack来解决问题，在IE浏览器版本升级更替，改进对css样式的支持后，之前使用的hacks将会无效。
在不使用css hack的情况下更新页面，可以使用条件注释来针对或避开IE浏览器。
针对IE浏览器：
步骤1.创建一个css样式文件，ie5.css
步骤2.使用条件注释：当使用的浏览器是ie5版本时，读取并使用ie5.css文件
示例：<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="css/ie5.css" media="screen">
<![endif]-->
使用条件注释的优点：
1.No Hacks
特定的css规则仅出现在新的样式表里。
2.文件分离
针对特定版本的IE定义的样式脱离了主样式表，可以在IE浏览器升级更新对属性支持时轻松移除这些文件。
3.针对性
可对不同版本的IE浏览器有针对性的进行相关属性的定义。