前面的話
CSS是網(wǎng)頁樣式的描述語言，CSS規(guī)范能夠使CSS代碼風(fēng)格保持一致，使得CSS更容易理解和維護。本文將詳細介紹CSS規(guī)范
代碼風(fēng)格
【選擇器】
1、選擇器 與 { 之間包含空格
.selector {} 2、>、+、~ 選擇器的兩邊各保留一個空格
/* good */main > nav{}/* bad */main>nav {}【屬性風(fēng)格】
1、屬性名 與之后的 : 之間不包含空格， : 與 屬性值 之間包含空格
margin: 0;
2、對于以逗號分隔的屬性值，每個逗號后面都應(yīng)該插入一個空格
font-family: Arial, sans-serif;
3、對于只包含一條聲明的樣式，為了易讀性和便于快速編輯，建議將語句放在同一行。對于帶有多條聲明的樣式，應(yīng)當(dāng)將聲明分為多行
.selector {
margin: 0;
padding: 0;
}.selector { margin: 0;}4、最后一個屬性值也以分號結(jié)尾，這樣可以減少修改、添加和維護代碼時不必要的失誤和麻煩
/* good */.selector {
margin: 0;
padding: 0;
}/* bad */.selector {
margin: 0;
padding: 0}
【引號】
1、文本內(nèi)容用雙引號包圍
html[lang|="zh"] q:before {
font-family: "Microsoft YaHei", sans-serif;
content: "“";
} 2、url() 函數(shù)中的路徑不加引號
body {background: url(bg.png);}【省略】
1、對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0
panel {opacity: .8}2、省略值為0時的單位，為節(jié)省不必要的字節(jié)同時也使閱讀方便，將0px、0em、0%等值縮寫為0
.m-box{margin:0 10px;background-position:50% 0;}【縮寫】
1、盡量使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff
2、十六進制值應(yīng)該全部小寫，例如，#fff。在掃描文檔時，小寫字符易于分辨，因為他們的形式更易于區(qū)分
3、在可以使用縮寫的情況下，盡量使用屬性縮寫，它最大的好處就是節(jié)省了字節(jié)，便于維護，并使閱讀更加一目了然
/* good */.post {
font: 12px/1.5 arial, sans-serif;
}/* bad */.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
【媒體查詢】
將媒體查詢@media放在盡可能相關(guān)規(guī)則的附近。不要將它們打包放在一個單一樣式文件中或者放在文檔底部。如果把它們分開了，將來更容易被遺忘
.element { ... }.element-avatar { ... }.element-selected { ... }@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }}
注釋
【單行注釋】
星號與內(nèi)容之間保留一個空格，以確保即使在編碼錯誤的情況下也可以正確解析樣式
/* 單行注釋 */
【塊狀注釋】
在必要的情況下，可以使用塊狀注釋，塊狀注釋保持統(tǒng)一的縮進對齊。星號要一列對齊，星號與內(nèi)容之間保留一個空格
/** * 多行注釋1 * 多行注釋2 */
【文件注釋】
文件頂部必須包含文件注釋，星號要一列對齊，星號與內(nèi)容之間保留一個空格，標識符冒號與內(nèi)容之間保留一個空格
用 @name 標識文件說明，@author標識作者，@description為文件或模塊描述，@update為可選項，建議每次改動都更新一下
/** * @name: 文件名或模塊名 * @description: 文件或模塊描述 * @author: author-name(mail-name@qq.com) * author-name2(mail-name2@qq.com) * @update: 2017-07-14 00:00 */
聲明順序
1、私有在前，標準在后，即先寫帶有瀏覽器私有標志的，后寫W3C標準的
.m-box {
-webkit-box-shadow: 0 0 0 #000;
-moz-box-shadow: 0 0 0 #000;
box-shadow: 0 0 0 #000;
}2、相關(guān)的屬性聲明應(yīng)當(dāng)歸為一組，并按照（布局類屬性->盒模型屬性->文本類屬性->修飾類屬性）順序排列
布局屬性處在第一位，是因為它可以使一個元素脫離正常文本流，并且覆蓋盒模型相關(guān)的樣式。盒模型緊跟其后，因為它決定了一個組件的大小和位置。其他屬性只在組件內(nèi)部起作用或者不會對前面兩種情況的結(jié)果產(chǎn)生影響，所以它們排在后面
布局類屬性 position / top / right / bottom / left / float / display / overflow 等 盒模型屬性 border / margin / padding / width / height 等 文本類屬性 font / line-height / text-align / word-wrap 等 修飾類屬性 background / color / transition / list-style 等
另外，如果包含 content 屬性，應(yīng)放在最前面
.sidebar { /* formatting model */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden; /* box model */
width: 200px;
padding: 5px;
border: 1px solid #ddd; /* typographic */
font-size: 14px;
line-height: 20px; /* visual */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
避免使用
1、盡量不使用 !important 聲明。 當(dāng)需要強制指定樣式且不允許任何場景覆蓋時，通過標簽內(nèi)聯(lián)和 !important 定義樣式
2、避免耗性能的屬性，如express和filter。不過有時候需求大于一切
/* expression */.class {width: expression(this.width>100?'100px':'auto');}/* filter */.class {filter: alpha(opacity=50);} 3、避免使用 @import，與 <link> 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數(shù)，還會導(dǎo)致不可預(yù)料的問題
4、避免sass中不必要的嵌套,這是因為雖然可以使用嵌套，但是并不意味著應(yīng)該使用嵌套。只有在必須將樣式限制在父元素內(nèi)（也就是后代選擇器），并且存在多個需要嵌套的元素時才使用嵌套
5、盡量避免使用hack，由于瀏覽器自身缺陷，無法避開的時候，可以允許使用適當(dāng)?shù)腍ack。統(tǒng)一使用“*”和“_”分別對IE7和6進行Hack
/* IE7會顯示灰色#888，IE6會顯示白色#fff，其他瀏覽器顯示黑色#000 */.m-list{
color:#000;
*color:#888;
_color:#fff;http://www.cnblogs.com/xiaohuochai/p/7173108.html
