css寫法怎麼優化

青灯夜游
發布: 2023-01-07 11:44:59
原創
1550 人瀏覽過

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

css寫法怎麼優化

本教學操作環境: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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!