CSS 性能優化篇

 CSS 性能優化總結篇

1、命名與備注規範化

　　頭：header

　　内容：content/container

　　尾：footer

　　導航：nav

　　側欄：sidebar

　　欄目：column

　　頁面外圍控制整體佈局寬度：wrapper

　　左右中：left right center

　　登入條：loginbar

　　标志：logo

　　廣告：banner

　　頁面主體：main

　　熱點：hot

　　新聞：news

　　下載下傳：download

　　子導航：subnav

　　菜單：menu

　　子菜單：submenu

　　搜尋：search

　　友情連結：friendlink

　　頁腳：footer

　　版權：copyright

　　滾動：scroll

　　内容：content

　　标簽：tags

　　文章清單：list

　　提示資訊：msg

　　小技巧：tips

　　欄目标題：title

　　加入：joinus

　　指南：guide

　　服務：service

　　注冊：regsiter

　　狀态：status

　　投票：vote

　　合作夥伴：partner

　　主導航：mainnav

　　頂導航：topnav

　　邊導航：sidebar

　　左導航：leftsidebar

　　右導航：rightsidebar

　　标題: title

　　摘要: summary

2、提取重複樣式【這一個方法很容易了解，簡單說就是提取相同的樣式成為一個單獨的類再引用，這樣不僅可以精簡CSS檔案大小，而且CSS代碼變少，更易于重用和維護】

　3、書寫順序

　　這個書寫順序指的是各個樣式的書寫順序，下面是推薦的CSS書寫順序

　　(1)位置屬性(position, top, right, z-index, display, float等)

　　(2)大小(width, height, padding, margin)

　　(3)文字系列(font, line-height, letter-spacing, color- text-align等)

　　(4)背景(background, border等)

　　(5)其他(animation, transition等)

　4、盡量将樣式寫在單獨的css檔案裡面，在head元素中引用

　　有時候為了圖友善或者快速搞定功能，我們可能會直接将樣式寫在頁面的style标簽或者直接内聯在元素上，這樣雖然簡單友善，但是非常不利于日後的維護。将代碼寫成單獨的css檔案有幾點好處：

　　(1)内容和樣式分離，易于管理和維護

　　(2)減少頁面體積

　　(3)css檔案可以被緩存、重用，維護成本降低

　　5、不使用@import

　　這條手段已經是衆所周知，這裡簡單提一下，@import影響css檔案的加載速度

　　6、避免使用複雜的選擇器，層級越少越好

　　有時候項目的子產品越來越多，功能越來越複雜，我們寫的CSS選擇器會内套多層，越來越複雜。

　　建議選擇器的嵌套最好不要超過三層

7

　1、盡量将樣式寫在單獨的css檔案裡面，在head元素中引用

　　2、不使用@import

　　3、避免使用複雜的選擇器，層級越少越好

8  正确使用display 屬性

display:inline後不應該再使用width、height、margin、padding以及float。

display:inline-block後不應該再使用float。

display:block後不應該再使用vertical-align。

display:table-*後不應該再使用margin或者float。

9.值為0的時候不需要加機關

10 不要過多的聲明font-size

11  不要濫用字型【web fonts 體積龐大的時候  可能會阻塞渲染影響性能】

12 不要濫用浮動