css怎么優化寫法

本篇內容介紹了“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怎么優化寫法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！