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

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/snowhite/p/10383424.html

總結

以上是生活随笔為你收集整理的教你如何写出高效整洁的 css 代码——css优化(转载)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。