css寫法怎麼優化

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

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

寫css關於id,class等的命名，檔案的結構，共同模組的擷取，程式碼的重複使用性，可讀性，擴充性，維護性都要考慮，不然後期可以會需要花大力氣去進行維護修改。考慮寫出足夠科學的css，需要考慮下面幾個面向。

先分析需求，依需求分出頭部、導覽、側邊欄、banner區，主要內容區，下方等。由於需要東西的複用度很高，不好歸於任何一個固定模組，例如分頁，彈窗等，他們需要單獨分出一段專屬的css和js，即組件化。有了清晰的結構後，便於維護。

然後在細化，發現一些復用度高的小的部分，例如邊框，背景，圖標，字體，邊距，佈局方式等。這些用的次數很多，造成程式碼冗餘和維護困難。因此需要對這部分進行統一維護修改。

同時，程式碼的排序也很重要，方便維護和繼承或層疊覆蓋。除了這些意外，透過註解在程式碼段前面添加目錄或名稱也有利於維護。

然後從結論來看，應該要注意：

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

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

原因：

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

• 需求和程式碼結構是隨時可能發生變化，有可能會復用到其他頁面，或者在該頁面增加內容，因此使用元素選擇器定死某個東西，不利於後期修改。

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

如：

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

這種情況應該提取一個公用類，然後定義同一樣式，更加方便。

4、檔案引入的數量和順序

檔案請求的次數應該盡量少，內容顯示有優先順序，檔案載入有先後順序，讓使用者先看到更重要的。

從矛盾上考慮，對一個樣式進行命名，在設計稿上樣式相似的兩個不同功能的模組，我們在命名的時候就不能考慮通過內容來命名，比如“news”“about 」等，而是從所屬類別，功能，頁面上來考慮。讓人比較容易的在名稱和結構間建立聯繫。在能把css寫的比較熟練後，可以使用css預處理器來提高效率。

（學習影片分享：css影片教學）

以上是css寫法怎麼優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！