css的优化规则

1、避免过度约束：

// 不推荐
ul.nav{..}
 
// 推荐
.nav{..}

 

 2、避免过长的后代选择符：

// 不推荐
html div tr td {..}

 

3、避免链式（交集）选择符：

// 不推荐
.menu.left.icon {..}
 
// 推荐
.menu-left-icon {..}

 

4、使用复合（紧凑）语法：

// 不推荐
.someclass {
 padding-top: 20px;
 padding-bottom: 20px;
 padding-left: 10px;
 padding-right: 10px;
 background: #000;
 background-image: url(../imgs/carrot.png);
 background-position: bottom;
 background-repeat: repeat-x;
}
 
// 推荐
.someclass {
 padding: 20px 10px 20px 10px;
 background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

 

5、避免不必要的命名空间

// 不推荐
.someclass table tr.otherclass td.somerule {..}
 
// 推荐
.someclass .otherclass td.somerule {..}

 

6、避免不必要的重复

// 不推荐
.someclass {
 color: red;
 background: blue;
 font-size: 15px;
}
 
.otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}
 
// 推荐
.someclass, .otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}

 

7、避免使用Hack：使用条件性注释来代替hack

8、移除多余的结构(frameworks)和重设(resets)：

　　（1）使用CSS framework、reset，YUI Grid CSS使用的reset和Eric Meyer’s重设(Reset)

　　（2）Resets能够移除不同浏览器的默认样式，使得页面在各个浏览器之间的表现一致

9、将CSS分成清晰的结构块：

　　（1）将CSS文件的声明用注释分隔开并进行排版

　　（2）拆分布局风格，也就是给每种布局一个单独的CSS文件

10、使用留白：嵌套的代码使用一个tab缩进，所有属性独立一行

11、制定一套CSS标准：一定要养成为CSS写注释的习惯

12、压缩代码：

　　压缩是一个不错的解决方案，但是仅限于发布的时候，YUI Compressor和CSSTidy就是这样方面的专家，他们能够去除多余的代码，校验属性互相覆盖的错误。

　　许多流行的编辑器，比如BBEdit, TextMate, 和 TopStyle 都能够帮助你格式化你的CSS代码成你想要的样子，你还能通过服务器压缩技术使用PHP处理你的CSS，你可以找到更多的CSS优化和压缩的CSS工具。

13、最好使用表示语义的名字：一个好的CSS类名应描述它是什么而不是它像什么。

14、避免 !importants：其实你应该也可以使用其他优质的选择器。

15、尽可能精简规则：你可以进一步合并不同类里的重复的规则。

16、合并CSS文件 

转载于:https://www.cnblogs.com/minozMin/p/8093551.html