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

　　導航：nav

　　主導航：mainnav

　　子導航：subnav

　　頂導航：topnav

　　邊導航：sidebar

　　左導航：leftsidebar

　　右導航：rightsidebar

　　菜單：menu

　　子菜單：submenu

　　標題: 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元素中引用

　　有時候為了圖方便或者快速搞定功能，我們可能會直接將樣式寫在頁面的style標簽或者直接內聯在元素上，這樣雖然簡單方便，但是非常不利于日后的維護。將代碼寫成單獨的css文件有幾點好處：

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

　　(2)減少頁面體積

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

　　2、不使用@import

　　這條手段已經是眾所周知，這里簡單提一下，@import影響css文件的加載速度

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

　　有時候項目的模塊越來越多，功能越來越復雜，我們寫的CSS選擇器會內套多層，越來越復雜。

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

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 不要濫用浮動