CSS規範

1、分類方法

CSS文件的分類和引用順序

一般，一個項目咱們只引用一個CSS，可是對於較大的項目，咱們須要把CSS文件進行分類。

咱們按照CSS的性質和用途，將CSS文件分紅「公共型樣式」、「特殊型樣式」、「皮膚型樣式」，並以此順序引用（按需求決定是否添加版本號）。

1. 公共型樣式：包括瞭如下幾個部分：「標籤的重置和設置默認值」、「統一調用背景圖和清除浮動或其餘需統一處理的長樣式」、「網站通用佈局」、「通用模塊和其擴展」、「元件和其擴展」、「功能類樣式」、「皮膚類樣式」。
2. 特殊型樣式：當某個欄目或頁面的樣式與網站總體差別較大或者維護率較高時，能夠獨立引用一個樣式：「特殊的佈局、模塊和元件及擴展」、「特殊的功能、顏色和背景」，也能夠是某個大型控件或模塊的獨立樣式。
3. 皮膚型樣式：若是產品須要換膚功能，那麼咱們須要將顏色、背景等抽離出來放在這裏。

1 <link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
2 <link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
3 <link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>

CSS內部的分類及其順序

1. 重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差別，並設置部分標籤的初始樣式，以減小後面的重複勞動！你能夠根據你的網站需求設置！
2. 統一處理：建議在這個位置統一調用背景圖（這裏指多個佈局或模塊或元件共用的圖）和清除浮動（這裏指通用性較高的佈局、模塊、元件內的清除）等統一設置處理的樣式！
3. 佈局（grid）（.g-）：將頁面分割爲幾個大塊，一般有頭部、主體、主欄、側欄、尾部等！
4. 模塊（module）（.m-）：一般是一個語義化的能夠重複使用的較大的總體！好比導航、登陸、註冊、各類列表、評論、搜索等！
5. 元件（unit）（.u-）：一般是一個不可再分的較爲小巧的個體，一般被重複用於各類模塊中！好比按鈕、輸入框、loading、圖標等！
6. 功能（function）（.f-）：爲方便一些經常使用樣式的使用，咱們將這些使用率較高的樣式剝離出來，按需使用，一般這些選擇器具備固定樣式表現，好比清除浮動等！不可濫用！
7. 皮膚（skin）（.s-）：若是你須要把皮膚型的樣式抽離出來，一般爲文字色、背景色（圖）、邊框色等，非換膚型網站一般只提取文字色！非換膚型網站不可濫用此類！
8. 狀態（.z-）：爲狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或做爲後代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規則的擴展相關項。
9. 功能類和皮膚類樣式爲表現化的樣式，請不要濫用！以上順序能夠按需求適當調整。以上分類的命名方法詳見命名規則

    1 /* 重置 */
    2 div,p,ul,ol,li{margin:0;padding:0;}
    3 /* 默認 */
    4 strong,em{font-style:normal;font-weight:bold;}
    5 /* 統一調用背景圖 */
    6 .m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
    7 /* 統一清除浮動 */
    8 .g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
    9 .g-bdc,.m-dimg ul,.u-tab{zoom:1;}
   10 /* 佈局 */
   11 .g-sd{float:left;width:300px;}
   12 /* 模塊 */
   13 .m-logo{width:200px;height:50px;}
   14 /* 元件 */
   15 .u-btn{height:20px;border:1px solid #333;}
   16 /* 功能 */
   17 .f-tac{text-align:center;}
   18 /* 皮膚 */
   19 .s-fc,a.s-fc:hover{color:#fff;}

 2、命名規則

使用類選擇器，放棄ID選擇器

ID在一個頁面中的惟一性致使了若是以ID爲選擇器來寫CSS，就沒法重用。

NEC特殊字符："-"連字符

"-"在本規範中並不表示連字符的含義。

她只表示兩種含義：分類前綴分隔符、擴展分隔符，詳見如下具體規則。

分類的命名方法：使用單個字母+"-"爲前綴

佈局（grid）（.g-）；模塊（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮膚（skin）（.s-）；狀態（.z-）。

對以上的解釋詳情參見：分類方法中的「CSS內部的分類及其順序」。

注：在你樣式中的選擇器老是要以上面前五類開頭，而後在裏面使用後代選擇器。

　　若是這五類不能知足你的需求，你能夠另外定義一個或多個大類，但必須符合單個字母+"-"爲前綴的命名規則，即 .x- 的格式。

　　特殊：.j-將被專用於JS獲取節點，請勿使用.j-定義樣式。

後代選擇器命名

• 約定不以單個字母+"-"爲前綴且長度大於等於2的類選擇器爲後代選擇器，如：.item爲m-list模塊裏的每個項，.text爲m-list模塊裏的文本部分：.m-list .item{}.m-list .text{}。
• 一個語義化的標籤也能夠是後代選擇器，好比：.m-list li{}。
• 不容許單個字母的類選擇器出現，緣由詳見下面的「模塊和元件的後代選擇器的擴展類」。

經過使用後代選擇器的方法，你不須要考慮他的命名是否已被使用，由於他只在當前模塊或元件中生效，一樣的樣式名能夠在不一樣的模塊或元件中重複使用，互不干擾；在多人協做或者分模塊協做的時候效果尤其明顯！

後代選擇器不須要完整表現結構樹層級，儘可能能短則短。

注：後代選擇器不要在頁面佈局中使用，由於污染的可能性較大；

/* 這裏的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 這裏的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

 

 命名應簡約而不失語義

/* 反對：表現化的或沒有語義的命名 */
.m-abc .green2{}
.g-left2{}
/* 推薦：使用有語義的簡短的命名 */
.m-list .wrap2{}
.g-side2{}

相同語義的不一樣類命名

方法：直接加數字或字母區分便可（如：.m-list、.m-list二、.m-list3等，都是列表模塊，可是是徹底不同的模塊）。

其餘舉例：.f-fw0、.f-fw一、.s-fc0、.s-fc一、.m-logo二、.m-logo三、u-btn、u-btn2等等。

模塊和元件的擴展類的命名方法

當A、B、C、...它們類型相同且外形類似區別不大，那麼就以它們中出現率最高的作成基類，其餘作成基類的擴展。

方法：+「-」+數字或字母（如：.m-list的擴展類爲.m-list-一、.m-list-2等）。

補充：基類自身能夠獨立使用（如：class="m-list"便可），擴展類必須基於基類使用（如：class="m-list m-list-2"）。

若是你的擴展類是表示不一樣狀態，那麼你能夠這樣命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等，而後像這樣使用：class="u-btn u-btn-dis"。

若是你的網站能夠不兼容IE6等瀏覽器，那麼你標識狀態的方法也能夠採起獨立狀態分類（.z-）方法：.u-btn.z-dis，.m-box.z-sel，而後像這樣使用：class="u-btn z-dis"。

模塊和元件的後代選擇器的擴展類

有時候模塊內會有些相似的東西，若是你沒有把它們作成元件和擴展，那麼也可使用後代選擇器和擴展。

後代選擇器：.m-login .btn{}。

後代選擇器擴展：.m-login .btn-1{}，.m-login .btn-dis{}。

一樣也能夠採起獨立狀態分類（.z-）方法：.m-login .btn.z-dis{}，而後像這樣使用：class="btn z-dis"。

注：此方法用於類選擇器，直接使用標籤作爲選擇器的則不須要使用此命名方法。

注：爲防止後代選擇器的擴展類和大類命名規範衝突，後代選擇器不容許使用單個字母。

　　好比：.m-list .a{}是不容許的，由於當這個.a須要擴展的時候就會變成.a-bb，這樣就和大類的命名規範衝突。

分組選擇器有時能夠代替擴展方法

有時候雖然兩個同類型的模塊很類似，可是你但願他們之間不要有依賴關係，也就是說你不但願使用擴展的方法，那麼你能夠經過合併選擇器來設置共性的樣式。

使用本方法的前提是：相同類型、功能和外觀都類似，寫在同一片代碼區域方便維護。

/* 兩個元件共性的樣式 */
.u-tip1,.u-tip2{}
.u-tip1 .itm,.u-tip2 .itm{}
/* 在分別是兩個元件各自的樣式 */
/* tip1 */
.u-tip1{}
.u-tip1 .itm{}
/* tip2 */
.u-tip2{}
.u-tip2 .itm{}

防止污染和被污染

當模塊或元件之間互相嵌套，且使用了相同的標籤選擇器或其餘後代選擇器，那麼裏面的選擇器就會被外面相同的選擇器所影響。

因此，若是你的模塊或元件可能嵌套或被嵌套於其餘模塊或元件，那麼要慎用標籤選擇器，必要時採用類選擇器，並注意命名方式，能夠採用.m-layer .layerxxx、.m-list2 .list2xxx的形式來下降後代選擇器的污染性。

 

選擇器、屬性和值都使用小寫

在xhtml標準中規定了全部標籤、屬性和值都小寫，CSS也是如此。

單行寫完一個選擇器定義

便於選擇器的尋找和閱讀，也便於插入新選擇器和編輯，便於模塊等的識別。去除多餘空格，使代碼緊湊減小換行。

若是有嵌套定義，能夠採起內部單行的形式。

/* 單行定義一個選擇器 */
.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}
/* 這是一個有嵌套定義的選擇器 */
@media all and (max-width:600px){
    .m-class1 .itm{height:17px;line-height:17px;font-size:12px;}
    .m-class2 .itm{width:100px;overflow:hidden;}
}
@-webkit-keyframes showitm{
    0%{height:0;opacity:0;}
    100%{height:100px;opacity:1;}
}

 

最後一個值也以分號結尾

一般在大括號結束前的值能夠省略分號，可是這樣作會對修改、添加和維護工做帶來沒必要要的失誤和麻煩。

省略值爲0時的單位

爲節省沒必要要的字節同時也使閱讀方便，咱們將0px、0em、0%等值縮寫爲0。

1 .m-box{margin:0 10px;background-position:50% 0;}

 

使用單引號

省略url引用中的引號，其餘須要引號的地方使用單引號。

1 .m-box{background:url(bg.png);}
2 .m-box:after{content:'.';}

使用16進製表示顏色值

除非你須要透明度而使用rgba，不然都使用#f0f0f0這樣的表示方法，並儘可能縮寫。

1 .m-box{color:#f00;background:rgba(0,0,0,0.5);}

根據屬性的重要性按順序書寫

只遵循橫向順序便可，先顯示定位佈局類屬性，後盒模型等自身屬性，最後是文本類及修飾類屬性。

 

→	顯示屬性	自身屬性	文本屬性和其餘修飾
	display	width	font
	visibility	height	text-align
	position	margin	text-decoration
	float	padding	vertical-align
	clear	border	white-space
	list-style	overflow	color
	top	min-width	background

 

1 .m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}