㈠ CSS規範 - 分類方法
Ⅰ. CSS文件的分類和引用順序
通常，一個項目我們只引用一個CSS，但是對於較大的項目，我們需要把CSS文件進行分類。
我們按照CSS的性質和用途，將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”，並以此順序引用（按需求決定是否添加版本號）。
1. 公共型樣式：包括了以下幾個部分：“標籤的重置和設置默認值”、“統一調用背景圖和清除浮動或其他需統一處理的長樣式”、“網站通用佈局”、“通用模塊和其擴展”、“元件和其擴展”、“功能類樣式”、“皮膚類樣式”。
2. 特殊型樣式：當某個欄目或頁面的樣式與網站整體差異較大或者維護率較高時，可以獨立引用一個樣式：“特殊的佈局、模塊和元件及擴展”、“特殊的功能、顏色和背景”，也可以是某個大型控件或模塊的獨立樣式。
3. 皮膚型樣式：如果產品需要換膚功能，那麼我們需要將顏色、背景等抽離出來放在這裏。
<link href="assets/css/global.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/index.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/skin.css" rel="stylesheet" type="text/css"/>Ⅱ.CSS內部的分類及其順序
- 重置（reset）和默認（base）（tags）：消除默認樣式和瀏覽器差異，並設置部分標籤的初始樣式，以減少後面的重複勞動！你可以根據你的網站需求設置！
- 統一處理：建議在這個位置統一調用背景圖（這裏指多個佈局或模塊或元件共用的圖）和清除浮動（這裏指通用性較高的佈局、模塊、元件內的清除）等統一設置處理的樣式！
- 佈局（grid）（.g-）：將頁面分割爲幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！
- 模塊（module）（.m-）：通常是一個語義化的可以重複使用的較大的整體！比如導航、登錄、註冊、各種列表、評論、搜索等！
- 元件（unit）（.u-）：通常是一個不可再分的較爲小巧的個體，通常被重複用於各種模塊中！比如按鈕、輸入框、loading、圖標等！
- 功能（function）（.f-）：爲方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！
- 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常爲文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！
- 狀態（.z-）：爲狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作爲後代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規則的擴展相關項。
功能類和皮膚類樣式爲表現化的樣式，請不要濫用！以上順序可以按需求適當調整。
以上分類的命名方法詳見命名規則
/* 重置 */
div,p,ul,ol,li{margin:0;padding:0;}
/* 默認 */
strong,em{font-style:normal;font-weight:bold;}
/* 統一調用背景圖 */
.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}
/* 統一清除浮動 */
.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}
.g-bdc,.m-dimg ul,.u-tab{zoom:1;}
/* 佈局 */
.g-sd{float:left;width:300px;}
/* 模塊 */
.m-logo{width:200px;height:50px;}
/* 元件 */
.u-btn{height:20px;border:1px solid #333;}
/* 功能 */
.f-tac{text-align:center;}
/* 皮膚 */
.s-fc,a.s-fc:hover{color:#fff;}㈡ CSS規範 - 命名規則
使用類選擇器，放棄ID選擇器
ID在一個頁面中的唯一性導致瞭如果以ID爲選擇器來寫CSS，就無法重用。
NEC特殊字符：”-“連字符
“-“在本規範中並不表示連字符的含義。
她只表示兩種含義：分類前綴分隔符、擴展分隔符，詳見以下具體規則。
分類的命名方法：使用單個字母+”-“爲前綴
佈局（grid）（.g-）；模塊（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮膚（skin）（.s-）；狀態（.z-）。
對以上的解釋詳情參見：分類方法中的“CSS內部的分類及其順序”。
注：在你樣式中的選擇器總是要以上面前五類開頭，然後在裏面使用後代選擇器。
如果這五類不能滿足你的需求，你可以另外定義一個或多個大類，但必須符合單個字母+”-“爲前綴的命名規則，即 .x- 的格式。
特殊：.j-將被專用於JS獲取節點，請勿使用.j-定義樣式。
後代選擇器命名
1. 約定不以單個字母+”-“爲前綴且長度大於等於2的類選擇器爲後代選擇器，如：.item爲m-list模塊裏的每一個項，.text爲m-list模塊裏的文本部分：.m-list .item{}.m-list .text{}。
2. 一個語義化的標籤也可以是後代選擇器，比如：.m-list li{}。
不允許單個字母的類選擇器出現，原因詳見下面的“模塊和元件的後代選擇器的擴展類”。
3. 通過使用後代選擇器的方法，你不需要考慮他的命名是否已被使用，因爲他只在當前模塊或元件中生效，同樣的樣式名可以在不同的模塊或元件中重複使用，互不干擾；在多人協作或者分模塊協作的時候效果尤爲明顯！
後代選擇器不需要完整表現結構樹層級，儘量能短則短。
注：後代選擇器不要在頁面佈局中使用，因爲污染的可能性較大；
/* 這裏的.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-list2、.m-list3等，都是列表模塊，但是是完全不一樣的模塊）。
其他舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。
模塊和元件的擴展類的命名方法
當A、B、C、…它們類型相同且外形相似區別不大，那麼就以它們中出現率最高的做成基類，其他做成基類的擴展。
方法：+“-”+數字或字母（如：.m-list的擴展類爲.m-list-1、.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的形式來降低後代選擇器的污染性。
㈢ CSS規範 - 代碼格式
選擇器、屬性和值都使用小寫
在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。
.m-box{margin:0 10px;background-position:50% 0;}使用單引號
省略url引用中的引號，其他需要引號的地方使用單引號。
.m-box{background:url(bg.png);}
.m-box:after{content:'.';}使用16進製表示顏色值
除非你需要透明度而使用rgba，否則都使用#f0f0f0這樣的表示方法，並儘量縮寫。
.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 |
.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}如果屬性間存在關聯性，則不要隔開寫。
/* 這裏的height和line-height有關聯性 */
.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}私有在前，標準在後
先寫帶有瀏覽器私有標誌的，後寫W3C標準的。
.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}註釋格式：/* 註釋文字 */
對選擇器的註釋統一寫在被註釋對象的上一行，對屬性及值的註釋寫於分號後。
註釋內容兩端需空格，已確保即使在編碼錯誤的情況下也可以正確解析樣式。
在必要的情況下，可以使用塊狀註釋，塊狀註釋保持統一的縮進對齊。
原則上每個系列的樣式都需要有一個註釋，言簡意賅的表明名稱、用途、注意事項等。
/* 塊狀註釋文字
* 塊狀註釋文字
* 塊狀註釋文字
*/
.m-list{width:500px;}
.m-list li{height:20px;line-height:20px;/* 這裏是對line-height的一個註釋 */overflow:hidden;}
.m-list li a{color:#333;}
/* 單行註釋文字 */
.m-list li em{color:#666;}原則上不允許使用Hack
很多不兼容問題可以通過改變方法和思路來解決，並非一定需要Hack，根據經驗你完全可以繞過某些兼容問題。
一種合理的結構和合理的樣式，是極少會碰到兼容問題的。
由於瀏覽器自身缺陷，我們無法避開的時候，可以允許使用適當的Hack。
統一Hack方法
統一使用“*”和“_”分別對IE7和6進行Hack。如下代碼所示：
/* IE7會顯示灰色#888，IE6會顯示白色#fff，其他瀏覽器顯示黑色#000 */
.m-list{color:#000;*color:#888;_color:#fff;}建議並適當縮寫值
“建議並適當”是因爲縮寫總是會包含一系列的值，而有時候我們並不希望設置某一值，反而造成了麻煩，那麼這時候你可以不縮寫，而是分開寫。
當然，在一切可以縮寫的情況下，請務必縮寫，它最大的好處就是節省了字節，便於維護，並使閱讀更加一目瞭然。
縮寫方法請查閱css手冊。
選擇器順序
請綜合考慮以下順序依據：
- 從大到小（以選擇器的範圍爲準）
- 從低到高（以等級上的高低爲準）
- 從先到後（以結構上的先後爲準）
- 從父到子（以結構上的嵌套爲準）
以下僅爲簡單示範：
/* 從大到小 */
.m-list p{margin:0;padding:0;}
.m-list p.part{margin:1px;padding:1px;}
/* 從低到高 */
.m-logo a{color:#f00;}
.m-logo a:hover{color:#fff;}
/* 從先到後 */
.g-hd{height:60px;}
.g-bd{height:60px;}
.g-ft{height:60px;}
/* 從父到子 */
.m-list{width:300px;}
.m-list .itm{float:left;}選擇器等級
a = 行內樣式style。
b = ID選擇器的數量。
c = 類、僞類和屬性選擇器的數量。
d = 類型選擇器和僞元素選擇器的數量。
| 選擇器 | 等級(a,b,c,d) |
|---|---|
| style=”” | 1,0,0,0 |
| wrapper #content {} | 0,2,0,0 |
| content .dateposted {} | 0,1,1,0 |
| div#content {} | 0,1,0,1 |
| content p {} | 0,1,0,1 |
| content {} | 0,1,0,0 |
| p.comment .dateposted {} | 0,0,2,1 |
| div.comment p {} | 0,0,1,2 |
| comment p {} | 0,0,1,1 |
| p.comment {} | 0,0,1,1 |
| comment {} | 0,0,1,0 |
| div p {} | 0,0,0,2 |
| p {} | 0,0,0,1 |
㈣ CSS規範 - 優化方案
值縮寫
縮寫值可以減少CSS文件大小，並增加可讀性和可維護性。
但並非所有的值都必須縮寫，因爲當一個屬性的值縮寫時，總是會將所有項都設置一遍，而有時候我們不希望設置值裏的某些項。
/* 比如我們用下面這個樣式來讓某個定寬的容器水平居中，我們要的只是left和right，
* 而top和bottom不是這個樣式要關心的（如果設置了反倒會影響其他樣式在這個容器上的使用），
* 所以這時我們就不需要縮寫
*/
.f-mgha{margin-left:auto;margin-right:auto;}
/* 比如下面這個模塊的樣式設置，我們確實需要設置padding的所有項，於是我們就可以採用縮寫 */
.m-link{padding:6px 12px;}常用的縮寫方法請參見代碼格式。
避免耗性能的屬性
以下所舉列的屬性可能造成渲染性能問題。不過有時候需求大於一切……
/* expression */
.class{width:expression(this.width>100?'100px':'auto');}
/* filter */
.class{filter:alpha(opacity=50);}選擇器合併
即CSS選擇器組合，可以一次定義多個選擇器，爲你節省很多字節和寶貴時間。
通常我們會將定義相同的或者有大部分屬性值相同（確實是因爲相關而相同）的一系列選擇器組合到一起（採用逗號的方法）來統一定義。
/* 以下對佈局類選擇器統一做了清除浮動的操作 */
.g-hd:after,.g-bd:after,.g-ft:after{display:block;visibility:hidden;clear:both;height:0;content:".";}
.g-hd,.g-bd,.g-ft{zoom:1;}
/* 通常background總是會佔用很多字節，所以一般情況下，我們都會這樣統一調用 */
.m-logo,.m-help,.m-list li,.u-tab li,.u-tab li a{background:url(../images/sprite.png) no-repeat 9999px 9999px;}
.m-logo{background-position:0 0;}
/* 以下是某個元件的寫法，因爲確實很多元素是聯動的或相關的，所以採用了組合寫法，可以方便理解和修改 */
.u-tab li,.u-tab li a{display:inline;float:left;height:30px;line-height:30px;}
.u-tab li{margin:0 3px;}
.u-tab li a{padding:0 6px;}背景圖優化合並
圖片本身的優化：
圖像質量要求和圖像文件大小決定你用什麼格式的圖片，用較小的圖片文件呈現較好的圖像質量。
當圖片色彩過於豐富且無透明要求時，建議採用jpg格式並保存爲較高質量。
- 當圖片色彩過於豐富又有透明或半透明要求或陰影效果時，建議採用png24格式，並對IE6進行png8退化（或在不得已情況下使用濾鏡）。
- 當圖片色彩不太豐富時無論有無透明要求，請採用png8格式，大多數情況下建議採用這種格式。
- 當圖片有動畫時，只能使用gif格式。
- 你可以使用工具對圖片進行再次壓縮，但前提是不會影響色彩和透明。
多張圖片的合併：
- 單個圖標之間必須保留空隙，空隙大小由容器大小及顯示方式決定。這樣做的好處是既考慮了“容錯性”又提高了圖片的可維護性。
- 圖標的排列方式，也由容器大小及顯示方式決定。排列方式分爲以下幾種：橫向排列（容器寬度有限）、縱向排列（容器高度有限）、斜線排列（容器寬高不限），靠左排列（容器背景居左）、靠右排列（容器背景居右）、水平居中排列（容器背景水平居中）、垂直居中排列（容器背景垂直居中）。
- 合併後圖片大小不宜超過50K，建議大小在20K-50K之間。
- 爲保證多次修改後的圖片質量，請保留一份PSD原始圖，修改和添加都在PSD中進行，最後導出png。
-
分類合併：
並不是把所有的圖標都合併在一張圖片裏就是最好的，除了要控制圖片大小之外還要注意以下方法。
- 按照圖片排列方式，把排列方式一樣的圖片進行合併，便於樣式控制。
- 按照模塊或元件，把同屬於一個模塊或元件的圖片進行合併，方便模塊或元件的維護。
- 按照圖片大小，把大小一致或差不多的圖片進行合併，可充分利用圖片空間。
- 按照圖片色彩，把色彩一致或差不多的圖片進行合併，保證合併後圖片的色彩不過於豐富，可防止色彩失真。
- 綜合以上方法進行合併。
Hack的避免
當避免的代價較大時，可以使用Hack而不避免，比如你需要增加很多HTML或多寫很多CSS時會得不償失。
豐富的實戰經驗可以幫助你瞭解那些常見問題並用多種不同的思路來避免它，所以經驗和思維方法在這裏顯得很重要。
根據你自己的能力來解決Hack的問題，我們不建議你用一個自己都沒有把握的方法來避免Hack，因爲也許你這個方法本身存在你沒有發現的問題。
如果CSS可以做到，就不要使用JS
讓CSS做更多的事，減輕JS開發量。
用CSS控制交互或視覺的變化，JS只需要更改className。
利用CSS一次性更改多個節點樣式，避免多次渲染，提高渲染效率。
如果你的產品允許不兼容低版本瀏覽器，那麼動畫實現可以交給CSS。
便於閱讀修改
如果你做到了“CSS規範”的所有要求，自然你也就寫出了一個便於閱讀和修改的漂亮的CSS。
當然，代碼格式和命名規則是相對重要一些的。
清晰的CSS模塊
如果你做到了命名規則的要求，你的CSS模塊也就清晰可見了。
用“註釋”來說明每一個模塊對於較大的CSS文件來說顯得尤爲重要。
文件壓縮
合理的書寫CSS能很大程度上減少文件大小，完成後，在不損壞文件內容的情況下，想盡一切辦法壓縮你的CSS，你可以藉助壓縮工具把註釋和多餘的空格、換行去掉。
壓縮工具詳見：“HTML/CSS工具”部分。
其他格式優化
優化方法請參見代碼格式。
㈤ CSS規範 - 最佳實踐
最佳選擇器寫法（模塊）
/* 這是某個模塊 */
.m-nav{}/* 模塊容器 */
.m-nav li,.m-nav a{}/* 先共性 優化組合 */
.m-nav li{}/* 後個性 語義化標籤選擇器 */
.m-nav a{}/* 後個性中的共性 按結構順序 */
.m-nav a.a1{}/* 後個性中的個性 */
.m-nav a.a2{}/* 後個性中的個性 */
.m-nav .z-crt a{}/* 交互狀態變化 */
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}/* 典型後代選擇器 */
.m-nav .btn-1{}/* 典型後代選擇器擴展 */
.m-nav .btn-dis{}/* 典型後代選擇器擴展（狀態） */
.m-nav .btn.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */
.m-nav .m-sch{}/* 控制內部其他模塊位置 */
.m-nav .u-sel{}/* 控制內部其他元件位置 */
.m-nav-1{}/* 模塊擴展 */
.m-nav-1 li{}
.m-nav-dis{}/* 模塊擴展（狀態） */
.m-nav.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */統一語義理解和命名
佈局（.g-）
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 文檔 | doc | doc |
| 頭部 | head | hd |
| 主體 | body | bd |
| 尾部 | foot | ft |
| 主欄 | main | mn |
| 主欄子容器 | mainc | mnc |
| 側欄 | side | sd |
| 側欄子容器 | sidec | sdc |
| 盒容器 | wrap/box | wrap/box |
模塊（.m-）、元件（.u-）
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 導航 | nav | nav |
| 子導航 | subnav | snav |
| 麪包屑 | crumb | crm |
| 菜單 | menu | menu |
| 選項卡 | tab | tab |
| 標題區 | head/title | hd/tt |
| 內容區 | body/content | bd/ct |
| 列表 | list | lst |
| 表格 | table | tb |
| 表單 | form | fm |
| 熱點 | hot | hot |
| 排行 | top | top |
| 登錄 | login | log |
| 標誌 | logo | logo |
| 廣告 | advertise | ad |
| 搜索 | search | sch |
| 幻燈 | slide | sld |
| 提示 | tips | tips |
| 幫助 | help | help |
| 新聞 | news | news |
| 下載 | download | dld |
| 註冊 | regist | reg |
| 投票 | vote | vote |
| 版權 | copyright | cprt |
| 結果 | result | rst |
| 標題 | title | tt |
| 按鈕 | button | btn |
| 輸入 | input | ipt |
功能（.f-）
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 浮動清除 | clearboth | cb |
| 向左浮動 | floatleft | fl |
| 向右浮動 | floatright | fr |
| 內聯塊級 | inlineblock | ib |
| 文本居中 | textaligncenter | tac |
| 文本居右 | textalignright | tar |
| 文本居左 | textalignleft | tal |
| 垂直居中 | verticalalignmiddle | vam |
| 溢出隱藏 | overflowhidden | oh |
| 完全消失 | displaynone | dn |
| 字體大小 | fontsize | fs |
| 字體粗細 | fontweight | fw |
皮膚（.s-）
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 字體顏色 | fontcolor | fc |
| 背景 | background | bg |
| 背景顏色 | backgroundcolor | bgc |
| 背景圖片 | backgroundimage | bgi |
| 背景定位 | backgroundposition | bgp |
| 邊框顏色 | bordercolor | bdc |
狀態（.z-）
| 語義 | 命名 | 簡寫 |
|---|---|---|
| 選中 | selected | sel |
| 當前 | current | crt |
| 顯示 | show | show |
| 隱藏 | hide | hide |
| 打開 | open | open |
| 關閉 | close | close |
| 出錯 | error | err |
| 不可用 | disabled | dis |
㈥ CSS規範 - 典型錯誤
不符合NEC規範的選擇器用法
.class{}
不要以一個沒有類別的樣式作爲主選擇器，這樣的選擇器只能作爲後代選擇器使用，比如.m-xxx .class{}。
.m-xxx div{}
不要以沒有語義的標籤作爲選擇器，這會造成大面積污染，除非你可以斷定現在或將來你的這個選擇器不會污染其他同類。
.g-xxx .class{}
不要在頁面佈局中使用後代選擇器，因爲這個後代選擇器可能會污染裏面的元素。
.g-xxx .m-yyy{}.g-xxx .u-yyy{}
不要用佈局去控制模塊或元件，模塊和元件應與佈局分離獨立。
.m-xxx .f-xxx{}.m-xxx .s-xxx{}
不要通過模塊或其他類來重定義或修改或添加已經定義好的功能類選擇器和皮膚類選擇器。
.m-xxx .class .class .class .class{}
不要將選擇器寫的過於冗長，這會額外增加文件大小並且限制了太小範圍的選擇器，使樹形結構過於嚴格應用範圍過於侷限，建議3-4個長度之內寫完。
選擇器並不需要完整反映結構嵌套順序，相反，能簡則簡。
.m-xxx .m-yyy .zzz{}
不要越級控制，如果.zzz是.m-yyy的後代選擇器，那麼不允許.m-yyy之外的選擇器控制或修改.zzz。
此時可以使用.m-yyy的擴展來修改.zzz，比如.m-yyy-1 .zzz{}。
擴展類使用錯誤
擴展類必須和其基類同時使用於同一個節點。
錯誤：class=”g-xxx g-yyy-1” class=”m-xxx-1” class=”u-xxx u-yyy-1” class=”xxx-yyy”。
正確：class=”g-xxx g-xxx-1” class=”m-xxx m-xxx-1” class=”u-yyy u-yyy-1” class=”xxx xxx-yyy”。
附錄：
1. css reset
重置樣式，清除瀏覽器默認樣式，並配置適合設計的基礎樣式（強調文本是否大多是粗體、主文字色，主鏈接色，主字體等）。
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}2. css function
功能樣式，從常用樣式方法中抽離，按需使用，使用前請先閱讀 CSS規範 中相關條列。
/* function */
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}
.f-ib{display:inline-block;*display:inline;*zoom:1;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-pr{position:relative;}
.f-prz{position:relative;zoom:1;}
.f-oh{overflow:hidden;}
.f-ff0{font-family:arial,\5b8b\4f53;}
.f-ff1{font-family:"Microsoft YaHei",\5fae\8f6f\96c5\9ed1,arial,\5b8b\4f53;}
.f-fs1{font-size:12px;}
.f-fs2{font-size:14px;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-taj{text-align:justify;text-justify:inter-ideograph;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-ti2{text-indent:2em;}
.f-lhn{line-height:normal;}
.f-tdu,.f-tdu:hover{text-decoration:underline;}
.f-tdn,.f-tdn:hover{text-decoration:none;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.f-csp{cursor:pointer;}
.f-csd{cursor:default;}
.f-csh{cursor:help;}
.f-csm{cursor:move;}
.f-usn{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}3. css media
通過媒體查詢爲不同的設備和大小配置不同的樣式。
/* media */
/* 橫屏 */
@media screen and (orientation:landscape){
}
/* 豎屏 */
@media screen and (orientation:portrait){
}
/* 窗口寬度<960,設計寬度=768 */
@media screen and (max-width:959px){
}
/* 窗口寬度<768,設計寬度=640 */
@media screen and (max-width:767px){
}
/* 窗口寬度<640,設計寬度=480 */
@media screen and (max-width:639px){
}
/* 窗口寬度<480,設計寬度=320 */
@media screen and (max-width:479px){
}
/* windows UI 貼靠 */
@media screen and (-ms-view-state:snapped){
}
/* 打印 */
@media print{
}4. css animation
常見動畫效果的集合，主要用於效果演示和參考（點擊查看代碼庫演示），也可以直接調用。
/* animation */
/* 淡入 */
.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
/* define */
/* 淡入 */
@-webkit-keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fadein{
0%{opacity:0;}
100%{opacity:1;}
}5. html template
包含完整頭部信息和主體結構的HTML基礎模板。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>NEC：更好的CSS方案</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
<body>
<div class="g-doc">
<div class="g-hd">
</div>
<div class="g-bd">
<div class="g-mn">
</div>
<div class="g-sd">
</div>
</div>
<div class="g-ft">
</div>
</div>
</body>
</html>6. html email
於製作郵件內容的HTML模板，使用前請先閱讀 郵件內容規範。
<table width="600" cellpadding="0" cellspacing="0" border="0"><tbody><tr><td>
<div style="width:600px;text-align:left;font:12px/15px simsun;color:#000;background:#fff;">
<!-- 水平居左的郵件 -->
</div>
</td></tr></tbody></table>
<div style="text-align:center;">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0 auto;"><tbody><tr><td>
<div style="width:600px;text-align:left;font:12px/15px simsun;color:#000;background:#fff;">
<!-- 水平居中的郵件 -->
</div>
</td></tr></tbody></table>
</div>