一、注釋規(guī)范?

1、文件頂部注釋（推薦使用）?

Css代碼?

/*??

*?@description:?中文說明??

*?@author:?name??

*?@update:?name?(2013-04-13?18:32)??

*/??

2、模塊注釋?

模塊注釋必須單獨(dú)寫在一行?

Css代碼?

/*?module:?module1?by?張三?*/??

…??

/*?module:?module2?by?張三?*/??

3、單行注釋與多行注釋?

單行注釋可以寫在單獨(dú)一行，也可以寫在行尾，注釋中的每一行長(zhǎng)度不超過40個(gè)漢字，或者80個(gè)英文字符。?

Css代碼?

/*?this?is?a?short?comment?*/??

多行注釋必須寫在單獨(dú)行內(nèi)?

Css代碼?

/*??

*?this?is?comment?line?1.??

*?this?is?comment?line?2.??

*/??

4、特殊注釋?

用于標(biāo)注修改、待辦等信息?

Css代碼?

/*?TODO:?xxxx?by?name?2013-04-13?18:32?*/??

/*?BUGFIX:?xxxx?by?name?2012-04-13?18:32?*/??

5、區(qū)塊注釋?

對(duì)一個(gè)代碼區(qū)塊注釋（可選），將樣式語句分區(qū)塊并在新行中對(duì)其注釋。?

Css代碼?

/*?Header?*/??

/*?Footer?*/??

/*?Gallery?*/ ?

二、編碼規(guī)范

?

1.?tab鍵用（必須）四個(gè)空格代替

2. 每個(gè)樣式屬性后（必須）加 ";"

方便壓縮工具"斷句"。

3. Class命名中（禁止）出現(xiàn)大寫字母，（必須）采用”?-?“對(duì)class中的字母分隔，如：

/* 正確的寫法 */.hotel-title {font-weight: bold;}/* 不推薦的寫法 */.hotelTitle {font-weight: bold;}

• 用"-"隔開比使用駝峰是更加清晰。
• 產(chǎn)品線-產(chǎn)品-模塊-子模塊，命名的時(shí)候也可以使用這種方式（@Artwl）

?

4. 空格的使用，以下規(guī)則（必須）執(zhí)行：

.hotel-content {font-weight: bold;}

• 選擇器與?{?之前（必須）要有空格
• 屬性名的?:?后（必須）要有空格
• 屬性名的?:?前（禁止）加空格

一個(gè)原因是美觀，其次IE 6存在一個(gè)bug， 戳bug

?

5.多選擇器規(guī)則之間（必須）換行

當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行

/* 推薦的寫法 */a.btn,input.btn,input[type="button"] {......}

?

6.?（禁止）將樣式寫為單行, 如

.hotel-content {margin: 10px; background-color: #efefef;}

單行顯示不好注釋，不好備注，這應(yīng)該是壓縮工具的活兒~

?

7.?（禁止）向?0?后添加單位, 如：

.obj {left: 0px; }

只是為了統(tǒng)一。記住，綠色字表強(qiáng)調(diào)，不表強(qiáng)制！

?

?

8.?（禁止）使用css原生import

使用css原生import有很多弊端，比如會(huì)增加請(qǐng)求數(shù)等....

9.?不要輕易改動(dòng)全站級(jí)CSS和通用CSS庫(kù)。改動(dòng)后，要經(jīng)過全面測(cè)試。8.?避免使用filter

10.?避免在CSS中使用expression

11.?避免過小的背景圖片平鋪，小圖片（必須）sprite?合并

12.?層級(jí)(z-index)必須清晰明確，頁(yè)面彈窗、氣泡為最高級(jí)（最高級(jí)為999），不同彈窗氣泡之間可在三位數(shù)之間調(diào)整；普通區(qū)塊為10-90內(nèi)10的倍數(shù)；區(qū)塊展開、彈出為當(dāng)前父層級(jí)上個(gè)位增加，禁止層級(jí)間盲目攀比。

13.?背景圖片請(qǐng)盡可能使用sprite技術(shù), 減小http請(qǐng)求, 考慮到多人協(xié)作開發(fā), sprite按照模塊、業(yè)務(wù)、頁(yè)面來劃分均可。

?

14.?（推薦）屬性的書寫順序, 舉個(gè)例子:

.hotel-content {/* 定位 */display: block;position: absolute;left: 0;top: 0;/* 盒模型 */width: 50px;height: 50px;margin: 10px;border: 1px solid black;/ *其他* /color: #efefef;}

• 定位相關(guān), 常見的有：display?position?left?top?float?等
• 盒模型相關(guān), 常見的有：width?height?margin?padding?border?等
• 其他屬性

?　 ?按照這樣的順序書寫可見提升瀏覽器渲染dom的性能

?

15.?（推薦）當(dāng)編寫針對(duì)特定html結(jié)構(gòu)的樣式時(shí)，使用元素名?+?類名

/* 所有的nav都是針對(duì)ul編寫的 */ul.nav {......}

".a div"和".a div.b"，為什么后者好？如果需求有所變化，在".a"下有多加了一個(gè)div，試問，開始的樣式是不是會(huì)影響后來的div啊~

?

16.?（推薦）IE Hack List

/* 針對(duì)ie的hack */selector {property: value; /* 所有瀏覽器 */ property: value\9; /* 所有IE瀏覽器 */ property: value\0; /* IE8 */+property: value; /* IE7 */_property: value; /* IE6 */*property: value; /* IE6-7 */}

當(dāng)使用hack的時(shí)候想想能不能用更好的樣式代替

?

17.?（不推薦）ie使用filter,（?禁止）使用expression

這里主要是效率問題，應(yīng)該當(dāng)格外注意，咱們要少用燒CPU的東西~?

18.?（禁止）使用行內(nèi)（inline）樣式

<p style="font-size: 12px; color: #FFFFFF">靖鳴君</p>

像這樣的行內(nèi)樣式，最好用一個(gè)class代替。又如要隱藏某個(gè)元素，可以給他加一個(gè)class

.hide {display: none; }

盡量做到樣式和結(jié)構(gòu)分離~

?

19.?（推薦）reset.css樣式

推薦網(wǎng)站：http://www.cssreset.com/

?

20.（禁止）使用"*"來選擇元素

/*別這樣寫*/ * {margin: 0;padding: 0; }

這樣寫是沒有必要的，一些元素在瀏覽器中默認(rèn)有margin或padding值，但是只是部分元素，沒有必要將所有元素的margin、padding值都置為0。

21. 鏈接的樣式，（務(wù)必）按照這個(gè)順序來書寫

a:link -> a:visited -> a:hover -> a:active

轉(zhuǎn)載于:https://www.cnblogs.com/liyunhua/p/4537058.html

總結(jié)

以上是生活随笔為你收集整理的css编写规范的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。