css寫法優(yōu)化：1、層級嵌套不能太深，一般不超過4層；2、避免使用元素選擇器，不利于后期修改；3、避免使用群組選擇器，可以提取一個公用類，定義同一樣式，更加方便；4、減少文件引入的數(shù)量，內(nèi)容顯示要有優(yōu)先順序。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

寫css關(guān)于id,class等的命名，文件的結(jié)構(gòu)，共同模塊的提取，代碼的復(fù)用性，可讀性，擴展性，維護性都要考慮，不然后期可以會需要花大力氣去進行維護修改?？紤]寫出足夠科學的css，需要考慮下面幾個方面。

首先分析需求，根據(jù)需要分出頭部、導(dǎo)航、側(cè)邊欄、banner區(qū)，主要內(nèi)容區(qū)，底部等。由于需要東西的復(fù)用度很高，不好歸于任何一個固定模塊，比如分頁，彈窗等，他們需要單獨分出一段專屬的css和js，即組件化。有了清晰的結(jié)構(gòu)后，便于維護。

然后在細化，發(fā)現(xiàn)一些復(fù)用度高的小的部分，比如邊框，背景，圖標，字體，邊距，布局方式等。這些用的次數(shù)很多，造成代碼冗余和維護困難。因此需要對這部分進行統(tǒng)一維護修改。

同時，代碼的排序也很重要，便于維護和繼承或者層疊覆蓋。除了這些意外，通過注釋在代碼段前面添加目錄或者名稱也有利于維護。

然后從結(jié)論來看，應(yīng)該注意：

1、層級嵌套不能太深，這樣會增加渲染時間。一般不超過4層最好。

2、避免使用元素選擇器。

原因：

• 同一個元素可能使用很多次，在瀏覽器遍歷的時候會遍歷所有該元素，這是沒必要的。

• 需求和代碼結(jié)構(gòu)是隨時可能發(fā)生變化，有可能會復(fù)用到其他頁面，或者在該頁面增加內(nèi)容，因此使用元素選擇器定死某個東西，不利于后期修改。

3、避免使用群組選擇器。

如：

.header ul li,.content ul li,.footer ul li{border-left:1px solid red};

這種情況應(yīng)該提取一個公用類，然后定義同一樣式，更加方便。

4、文件引入的數(shù)量和順序

文件請求的次數(shù)應(yīng)該盡量少，內(nèi)容顯示有優(yōu)先順序，文件加載有先后順序，讓用戶先看到更重要的。

從矛盾上考慮，對一個樣式進行命名，在設(shè)計稿上樣式相似的兩個不同功能的模塊，我們在命名的時候就不能考慮通過內(nèi)容來命名，比如“news”“about”等，而是從所屬類別，功能，頁面上來考慮。讓人比較容易的在名稱和結(jié)構(gòu)間建立聯(lián)系。在能把css寫的比較熟練后，可以使用css預(yù)處理器來提高效率。

（學習視頻分享：css視頻教程）