NEC css规范
CSS規范?-?分類方法
SS文件的分類和引用順序
通常，一個項目我們只引用一個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內部的分類及其順序
功能類和皮膚類樣式為表現化的樣式，請不要濫用！以上順序可以按需求適當調整。
以上分類的命名方法詳見命名規則
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /*?重置?*/ 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-定義樣式。
后代選擇器命名
- 約定不以單個字母 "-"為前綴且長度大于等于2的類選擇器為后代選擇器，如：.item為m-list模塊里的每一個項，.text為m-list模塊里的文本部分：.m-list?.item{}.m-list?.text{}。
- 一個語義化的標簽也可以是后代選擇器，比如：.m-list?li{}。
- 不允許單個字母的類選擇器出現，原因詳見下面的“模塊和元件的后代選擇器的擴展類”。
通過使用后代選擇器的方法，你不需要考慮他的命名是否已被使用，因為他只在當前模塊或元件中生效，同樣的樣式名可以在不同的模塊或元件中重復使用，互不干擾；在多人協作或者分模塊協作的時候效果尤為明顯！
后代選擇器不需要完整表現結構樹層級，盡量能短則短。
注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；
| 1 2 3 4 5 6 7 8 | /*?這里的.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;} |
命名應簡約而不失語義
| 1 2 3 4 5 6 | /*?反對：表現化的或沒有語義的命名?*/ .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，這樣就和大類的命名規范沖突。
分組選擇器有時可以代替擴展方法
有時候雖然兩個同類型的模塊很相似，但是你希望他們之間不要有依賴關系，也就是說你不希望使用擴展的方法，那么你可以通過合并選擇器來設置共性的樣式。
使用本方法的前提是：相同類型、功能和外觀都相似，寫在同一片代碼區域方便維護。
| 1 2 3 4 5 6 7 8 9 10 | /*?兩個元件共性的樣式?*/ .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也是如此。
單行寫完一個選擇器定義
便于選擇器的尋找和閱讀，也便于插入新選擇器和編輯，便于模塊等的識別。去除多余空格，使代碼緊湊減少換行。
如果有嵌套定義，可以采取內部單行的形式。
| 1 2 3 4 5 6 7 8 9 10 11 | /*?單行定義一個選擇器?*/ .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 2 | .m-box{background:url(bg.png);} .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;} | ||||
如果屬性間存在關聯性，則不要隔開寫。
| 1 2 | /*?這里的height和line-height有關聯性?*/ .m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;} |
私有在前，標準在后
先寫帶有瀏覽器私有標志的，后寫W3C標準的。
| 1 | .m-box{-webkit-box-shadow:0?0?0?#000;-moz-box-shadow:0?0?0?#000;box-shadow:0?0?0?#000;} |
注釋格式：/*?注釋文字?*/
對選擇器的注釋統一寫在被注釋對象的上一行，對屬性及值的注釋寫于分號后。
注釋內容兩端需空格，已確保即使在編碼錯誤的情況下也可以正確解析樣式。
在必要的情況下，可以使用塊狀注釋，塊狀注釋保持統一的縮進對齊。
原則上每個系列的樣式都需要有一個注釋，言簡意賅的表明名稱、用途、注意事項等。
| 1 2 3 4 5 6 7 8 9 | /*?塊狀注釋文字 ?*?塊狀注釋文字 ?*?塊狀注釋文字 ?*/ .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。如下代碼所示：
| 1 2 | /*?IE7會顯示灰色#888，IE6會顯示白色#fff，其他瀏覽器顯示黑色#000?*/ .m-list{color:#000;*color:#888;_color:#fff;} |
建議并適當縮寫值
“建議并適當”是因為縮寫總是會包含一系列的值，而有時候我們并不希望設置某一值，反而造成了麻煩，那么這時候你可以不縮寫，而是分開寫。
當然，在一切可以縮寫的情況下，請務必縮寫，它最大的好處就是節省了字節，便于維護，并使閱讀更加一目了然。
縮寫方法請查閱css手冊。
選擇器順序
請綜合考慮以下順序依據：
- 從大到小（以選擇器的范圍為準）
- 從低到高（以等級上的高低為準）
- 從先到后（以結構上的先后為準）
- 從父到子（以結構上的嵌套為準）
以下僅為簡單示范：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | /*?從大到小?*/ .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文件大小，并增加可讀性和可維護性。
但并非所有的值都必須縮寫，因為當一個屬性的值縮寫時，總是會將所有項都設置一遍，而有時候我們不希望設置值里的某些項。
| 1 2 3 4 5 6 7 | /*?比如我們用下面這個樣式來讓某個定寬的容器水平居中，我們要的只是left和right， ?*?而top和bottom不是這個樣式要關心的（如果設置了反倒會影響其他樣式在這個容器上的使用）， ?*?所以這時我們就不需要縮寫 ?*/ .f-mgha{margin-left:auto;margin-right:auto;} /*?比如下面這個模塊的樣式設置，我們確實需要設置padding的所有項，于是我們就可以采用縮寫?*/ .m-link{padding:6px?12px;} |
常用的縮寫方法請參見代碼格式。
避免耗性能的屬性
以下所舉列的屬性可能造成渲染性能問題。不過有時候需求大于一切……
| 1 2 3 4 | /*?expression?*/ .class{width:expression(this.width>100?'100px':'auto');} /*?filter?*/ .class{filter:alpha(opacity=50);} |
?
選擇器合并
即CSS選擇器組合，可以一次定義多個選擇器，為你節省很多字節和寶貴時間。
通常我們會將定義相同的或者有大部分屬性值相同（確實是因為相關而相同）的一系列選擇器組合到一起（采用逗號的方法）來統一定義。
圖片本身的優化：背景圖優化合并
- 圖像質量要求和圖像文件大小決定你用什么格式的圖片，用較小的圖片文件呈現較好的圖像質量。
- 當圖片色彩過于豐富且無透明要求時，建議采用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規范?-?最佳實踐
最佳選擇器寫法（模塊）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /*?這是某個模塊?*/ .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"。
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： Angularjs基础(三)
- 下一篇： jquery mobile 移动web(