一、css命名規則：
1、規則命名中，一律採用小寫加中劃線的方式，不允許使用大寫字母或——
2、命名避免使用中文拼音，應該採用更加簡潔有語義的英文單詞進行組合
3、命名注意縮寫，但是不能盲目縮寫，具體請參加常見的命名規則
4、不允許通過1、2、3等序號進行命名
5、避免class和id重名
6、id用於標識模組或頁面的某乙個父容器區域，名稱必須唯一，不要隨意新建id
7、class用於標識某乙個型別的物件，命名必須言簡意賅
8、盡可能提高**模組的復用，樣式盡量用組合的方式
9、規則名稱中不該包含顏色（red/blue），定位（left/right）等與具體顯示效果相關的資訊。應該用意義命名，而不是樣式顯示結果命名。
二、csss書寫規範
1、排版規範
（1）使用4個空格，而不使用tab或者混用空格+tab作為縮排；
（2）規則可以寫成單行，或者多行，但是整個檔案內的規則排版必須統一；
單行形式書寫風格的排版約束
（1）如果是在html中寫內聯的css,則必須寫成單行；
（2）每一條規則的大括號{}前後都要加空格；
（3）屬性名冒號之前不加空格，冒號之後加空格；
（4）每乙個屬性值後必須新增分號；並且分號後加空格；
（5）多個selector共用乙個樣式集，則多個selector必須寫成多行形式；
多行形式書寫風格的排版約束
（1）每一條規則的大括號{}前後都要加空格；
（2）多個selector共用乙個樣式集，則多個selector必須寫成多行形式；
（3）每一條規則結束的大寫}必須與規則選擇器的第乙個字元對齊；
三、屬性編寫順序
（1）顯示屬性：display/list-style/position/float/clear...
（2）自身屬性（盒模型）：width/height/margin/padding/border
（3）背景：background
（4）行高：line-height
（5）文字屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
（6）其他：cursor/z-index/zoom/overflow
（7）css3屬性：transform/transition/animation/box-shadow/border-radius
（8）如果使用css3的屬性，如果有必要加入瀏覽器字首，則按照 -webkit-/-moz-/-ms-/-o-/std的順序進行新增，標準屬性寫在最後。
四、**優化
（1）合併margin、padding、border的left/top/right/bottom的設定，盡量使用短命名。
（2）選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器巢狀，查詢消耗。但是一定要避免覆蓋全域性樣式的設定。
（3）注意選擇器的效能，不要使用低效能的選擇器，減少使用子代、後代選擇器。
（4）禁止在css中使用*選擇符
（5）除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag
（6）0後面不需要單位，比如0px可以省略成0,0.8px可以省略成.8px
（7）如果是16進製表示顏色，則顏色取值應該大寫
（8）如果可以，顏色盡量用三位字元來表示，例如#aabbcc寫成#abc
（9）如果沒有邊框時，不要寫成border:0,應該寫成border:none
（10）盡量避免使用alphaimageloader
（11）在保持**解耦的前提下，盡量合併重複的樣式
（12）background、font等可以縮寫的屬性、盡量使用縮寫形式。
五、css hack 的使用
減少使用css hack.
（1）區別屬性（樣式屬性字首法）：
ie6 _property:value
ie6/7 *property:value
ie6/7/8/9 property:value\9
（2）區別規則（選擇符字首法）：
ie6 *html .test
ie7 *+html .test
*:first-child+html .test
（3）ie條件注釋法
只在ie下生效
只在ie6下生效
只在ie6以上生效
（6）iphone/mobile區別
max-width 最大寬度 ；device-width 裝置寬度；orientation 螢幕定向(屬性值：landscape 橫屏；portrait 豎屏)
（1）@media screen and (max-device-width:480px)
（2）六、低權重原則
css的選擇符是有權重的，當不同選擇符的樣式設定有衝突時，會採用權重高的選擇符設定的樣式。
權重的規則是這樣的：html標籤的權重是1，class的權重是10，id 的權重是100；
例如：div .test的權重是1+10=11
p span的權重是1+1=2
七、css sprite
（1）它能合併的只能是用於背景的，對於
設定的，是不能合併到css sprite 大圖中
（2）對於橫向和縱向都要平鋪的，也不能使用css sprite;如果是橫向平鋪的，只能將所有橫向平鋪的合成一張。
（3） 要排列得緊湊些，同時保證不會影響擴充套件性。
CSS效能優化總結與理解
大家對阻塞這一詞一定不陌生！js在執行會出現dom樹解析和渲染阻塞，我來測試一下 我們設定3g這樣載入css慢了 得出的結果是先解析了等載入完css才渲染了 其實我覺得，這可能也是瀏覽器的一種優化機制。因為你載入css的時候，可能會修改下面dom節點的樣式，如果css載入不阻塞dom樹渲染的話，那麼...
CSS寫作建議和效能優化總結
今年難得遇到中秋和國慶，已經放假幾天了，我也回到家了。今天還是比較開心的，搶了比較多的紅包，嘿嘿。紅包搶完了，現在也空下來寫點部落格咯。這裡是我從網上的一篇文章看過來的，這裡先做一點小結，之後再補充。1.css渲染規則 今天在微博的一篇文章上看到的，之前我都以為渲染是從左往右渲染。發現我的想法是錯的...
CSS優化概述
css優化的作用 1 減輕伺服器的壓力 2 縮短伺服器響應時間 3 提高使用者的體驗度 css優化原則 1 儘量減少http請求個數 css sprites 合併多個背景影象到乙個單獨影象，然後通過background image和background position進行調整 image maps...