高效整洁的 css 代码——css优化

一时失言乱红尘 2022-05-27 12:49 238阅读 0赞

css 写起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在 css 书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的 css 代码原则。

## css 优化的原则 ##

1、不影响页面的布局

2、去掉不必要的样式

3、合并相同的样式

4、尽可能缩小样式的大小

## css 样式中常见的问题 ##

1、除 body 之外的样式重写了与 body 一样的样式，如：

1 body{font-size:12px;color:red;}  
    2 h1{font-size:16px;color:red;}

h1 在页面解析的时候已经继承了 body 中的属性，所以 color:red; 就没有必要再次重写了。

2、0 加单位与不加单位意义一样，如：

1 h1{margin:0px;}
    2 h1{margin:0;}

上面两个样式完全等价，其中下面样式写法更好。

3、完全相同的样式没有必要写两次。如：

1 h1{color:red;}
    2 h2{color:red;}

上面两个样式一样，我们可以进行合并：

1 h1,h2{color:red;}

4、一些样式的缩写，如 margin，padding

1 h1{margin-top:5px;margin-right:5px;margin-bottom:5px;margin-left:5px;}

上面的样式可以进行缩写：

1 h1{margin:5px;}

5、颜色可以简写，如：

1 h1{color:#000000;}

上面的样式可以简写成：

1 h1{color:#000;}

还可以继续简写成：

1 h1{color:black;}

## css 优化主要的好处 ##

1、提高 css 文件的易读性

2、减小 css 文件的大小

3、能够相对的加快浏览器的加载速率

## 实现高效整洁的 css 代码原则 ##

### 1、使用 reset 但非全局 reset ###

不同浏览器元素的默认属性有所不同，使用 reset 可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局 reset：

1 *{margin:0;padding:0;}

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考 YUI Reset 和 Eric Meyer 的做法。reset 并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。这是我使用的 [reset.css][]。

### 2、良好的命名习惯 ###

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。就像这样的代码：

1 .aaabbb{margin:2px;color:red;}

我想即使初学者，也不至于会在实际项目中如此命名一个 class。

### 3、代码缩写 ###

css 代码缩写可以提高写代码的速度，精简代码量。在 css 里面有不少可以缩写的属性，包括 margin，padding，border，font，background 和颜色值，如果学会了代码缩写，原本这样的代码：

1 p{  
    2     font-family:Arial,Helvetica,sans-serif;  
    3     font-size:1.2em;  
    4     line-height:1.4em;  
    5     padding-top:5px;  
    6     padding-bottom:10px;  
    7     padding-left:5px;  
    8 }

就可以缩写为：

1 p{  
    2     font:1.2em/1.4em Arial,Helvetica,sans-serif;  
    3     padding:5px 0 10px 5px;  
    4 }

具体的 css 缩写规则，请点击下面的地址：

[http://www.cnblogs.com/yjzhu/archive/2012/11/05/2754877.html][http_www.cnblogs.com_yjzhu_archive_2012_11_05_2754877.html]

### 4、利用 css 的继承 ###

如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让他们继承这些 css 样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：

1 #content li{color:red;}
    2 #content p{color:red;}
    3 #content h1{color:red;}

就可以简写成：

1 #content{color:red;}

### 5、使用多重选择器 ###

你可以合并多个 css 选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

1 h1{font-family:Arial, Helvetica, sans-serif; font-weight:normal;}
    2 h2{font-family:Arial, Helvetica, sans-serif; font-weight:normal;}
    3 h3{font-family:Arial, Helvetica, sans-serif; font-weight:normal;}

上面三个样式可以合并

h1,h2,h3{font-family:Arial, Helvetica, sans-serif;font-weight:normal;}

### 6、适当的代码注释 ###

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。

你可以选择做的样式表的开始添加目录：

1 /*------------------------------------   
    2      1. Reset   
    3      2. Header   
    4      3. Content   
    5      4. SideBar   
    6      5. Footer   
    7 ----------------------------------- */

如此你代码的结构就一目了然，你可以容易的查找和修改代码。

而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于团队开发：

1 /***  Header  ***/
     2 #header{height:145px;position:relative;}
     3 #header h1{width:324px;margin:45px 0 0 20px;float:left;height:72px;}
     4 /***  Content  ***/
     5 #content{background:#fff;width:650px;float:left;min-height:600px;overflow:hidden;}
     6 #content h1{color:#F00}/* 设置字体颜色 */
     7 #content .posts{overflow:hidden;}
     8 #content .recent{margin-bottom:20px;border-bottom:1px solid #f3f3f3;position:relative;overflow:hidden;}
     9 /***  Footer  ***/
    10 #footer{clear:both;padding:50px 5px 0;overflow:hidden;}    
    11 #footer h4{color:#b99d7f;font-family:Arial,Helvetica,sans-serif;font-size:1.1em;}

### 7、给你的 css 代码排序 ###

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速：

1 /*** 样式属性按字母排序 ***/    
     2 div{    
     3     background-color:#3399cc;    
     4     color:#666;    
     5     font:1.2em/1.4em Arial, Helvetica, sans-serif;    
     6     height:300px;    
     7     margin:10px 5px;    
     8     padding:5px 0 10px 5px;    
     9     width:30%;    
    10     z-index:10;    
    11 }

### 8、保持 css 的可读性 ###

书写可读的 css 将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

1 /*** 每个样式属性写一行 ***/    
     2 div{    
     3     background-color:#3399cc;    
     4     color:#666;    
     5     font: 1.2em/1.4em Arial, Helvetica, sans-serif;    
     6     height:300px;    
     7     margin:10px 5px;    
     8     padding:5px 0 10px 5px;    
     9     width:30%;    
    10     z-index:10;    
    11 }    
    12 /*** 所有的样式属性写在同一行 ***/    
    13 div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;  height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器，我会写到一行：

1 /*** 选择器属性少的写在同一行 ***/
    2 div{background-color:#39c;color:#666;}

对于这个规则并非硬性规定，但无论采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于 3 个可以写一行。

### 9、选择更优的样式属性值 ###

css 中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如：

区别在于 border:0 把 border 设为 0px，虽然在页面上看不见，但按 border 默认值理解，浏览器依然对 border-width/border-color 进行了渲染，即已经占用了内存值。

而 border:none 把 border 设为 none 即没有，浏览器解析 none 时将不作出渲染动作，即不会消耗内存值。所以建议使用 border:none;

同样的，display:none 隐藏对象浏览器不作渲染，不占用内存。而 visibility:hidden 则会。

### 10、使用 link 代替 @import ###

@import 不属于 xhtml 标签，也不是 web 标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。所以，请避免使用 @import

### 11、使用外部样式表 ###

这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为 css 文件都能在浏览器中产生缓存。内置在 html 文档中的 css 则会在每次请求中随 html 文档重新下载。所以，在实际应用中，没有必要把 css 代码内置在 html 文档中。

### 12、避免使用 css 表达式（expression） ###

css 表达式是动态设置 css 属性的强大（但危险）方法。ie 从第 5 个版本开始支持 css 表达式。下面的例子中，使用 css 表达式可以实现隔一个小时切换一次背景颜色：

1 div{background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );}

如上所示，expression 中使用了 javascript 表达式。css 属性根据 javascript 表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给 css 表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到 10000 次以上的计算量。

如果必须使用 css 表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用 css 表达式。

### 13、代码压缩 ###

当你决定把网站项目部署到网络上，那你就要考虑对 css 进行压缩，出去注释和空格，以使得网页加载得更快。压缩代码，可以采用一些工具，如 YUI Compressor 利用它可精简 css 代码，减少文件大小，以获得更高的加载速度。

转自：[https://www.cnblogs.com/yjzhu/archive/2012/11/06/2756658.html][https_www.cnblogs.com_yjzhu_archive_2012_11_06_2756658.html]

[reset.css]: http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html
[http_www.cnblogs.com_yjzhu_archive_2012_11_05_2754877.html]: http://www.cnblogs.com/yjzhu/archive/2012/11/05/2754877.html
[https_www.cnblogs.com_yjzhu_archive_2012_11_06_2756658.html]: https://www.cnblogs.com/yjzhu/archive/2012/11/06/2756658.html