如何书写高效的css样式

如何书写高效的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浏览器有针对性的进行相关属性的定义。