常用class的命名有哪些？

(1) 顏色:使用顏色的名稱或者16進制代碼，如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2) 字體大小,直接使用”font+字體大小”作為名稱，如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3) 對齊樣式,使用對齊目標的英文名稱，如

.left { float:left; }

.bottom { float:bottom; }

(4) 標題欄樣式,使用”類別+功能”的方式命名，如

.barnews { }

.barproduct { }

1、排版規范

(1) 使用4個空格，而不使用tab或者混用空格+tab作為縮進；
(2) 規則可以寫成單行，或者多行，但是整個文件內的規則排版必須統一；

單行形式書寫風格的排版約束：

如果是在html中寫內聯的css，則必須寫成單行；

每一條規則的大括號 { 前后加空格 ；

每一條規則結束的大括號 } 前加空格；

屬性名冒號之前不加空格，冒號之后加空格；

每一個屬性值后必須添加分號; 并且分號后空格；

多個selector共用一個樣式集，則多個selector必須寫成多行形式 ；

多行形式書寫風格的排版約束：

每一條規則的大括號 { 前添加空格；

多個selector共用一個樣式集，則多個selector必須寫成多行形式；

每一條規則結束的大括號 } 必須與規則選擇器的第一個字符對齊；

屬性名冒號之前不加空格，冒號之后加空格；

屬性值之后添加分號；

2、屬性編寫順序

顯示屬性：display/list-style/position/float/clear …

自身屬性（盒模型）：width/height/margin/padding/border

背景：background

行高：line-height

文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…

其他：cursor/z-index/zoom/overflow

CSS3屬性：transform/transition/animation/box-shadow/border-radius

如果使用CSS3的屬性，如果有必要加入瀏覽器前綴，則按照 -webkit- / -moz- / -ms- / -o- / std的順序進行添加，標準屬性寫在最后。

鏈接的樣式請嚴格按照如下順序添加： a:link -> a:visited -> a:hover -> a:active

3、規則書寫規范

使用單引號，不允許使用雙引號;

每個聲明結束都應該帶一個分號，不管是不是最后一個聲明;

除16進制顏色和字體設置外，CSS文件中的所有的代碼都應該小寫;

除了重置瀏覽器默認樣式外，禁止直接為html tag添加css樣式設置;

每一條規則應該確保選擇器唯一，禁止直接為全局.nav/.header/.body等類設置屬性;

4、代碼性能優化

合并margin、padding、border的-left/-top/-right/-bottom的設置，盡量使用短名稱。

選擇器應該在滿足功能的基礎上盡量簡短，減少選擇器嵌套，查詢消耗。但是一定要避免覆蓋全局樣式設置。

注意選擇器的性能，不要使用低性能的選擇器。

禁止在css中使用*選擇符。

除非必須，否則，一般有class或id的，不需要再寫上元素對應的tag。

0后面不需要單位，比如0px可以省略成0，0.8px可以省略成.8px。

如果是16進制表示顏色，則顏色取值應該大寫。

如果可以，顏色盡量用三位字符表示，例如#AABBCC寫成#ABC 。

如果沒有邊框時，不要寫成border:0，應該寫成border:none 。

盡量避免使用AlphaImageLoader 。

在保持代碼解耦的前提下，盡量合并重復的樣式。

background、font等可以縮寫的屬性，盡量使用縮寫形式 。

5、CSS Hack的使用

請不用動不動就使用瀏覽器檢測和CSS Hacks，先試試別的解決方法吧！考慮到代碼高效率和易管理，雖然這兩種方法能快速解決瀏覽器解析差異，但應被視為最后的手段。在長期的項目中，允許使用hack只會帶來更多的hack，你越是使用它，你越是會依賴它！