常用class的命名有哪些？

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

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

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

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

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

.left { float:left; }

.bottom { float:bottom; }

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

.barnews { }

.barproduct { }

1、排版規(guī)范

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

單行形式書寫風(fēng)格的排版約束：

如果是在html中寫內(nèi)聯(lián)的css，則必須寫成單行；

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

每一條規(guī)則結(jié)束的大括號 } 前加空格；

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

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

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

多行形式書寫風(fēng)格的排版約束：

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

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

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

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

屬性值之后添加分號；

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的順序進(jìn)行添加，標(biāo)準(zhǔn)屬性寫在最后。

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

3、規(guī)則書寫規(guī)范

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

每個聲明結(jié)束都應(yīng)該帶一個分號，不管是不是最后一個聲明;

除16進(jìn)制顏色和字體設(shè)置外，CSS文件中的所有的代碼都應(yīng)該小寫;

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

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

4、代碼性能優(yōu)化

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

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

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

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

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

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

如果是16進(jìn)制表示顏色，則顏色取值應(yīng)該大寫。

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

如果沒有邊框時，不要寫成border:0，應(yīng)該寫成border:none 。

盡量避免使用AlphaImageLoader 。

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

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

5、CSS Hack的使用

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