NEC css規範

来源:http://www.cnblogs.com/nmxs/archive/2016/02/18/5197315.html
-Advertisement-
Play Games

CSS規範 - 分類方法 SS文件的分類和引用順序 通常,一個項目我們只引用一個CSS,但是對於較大的項目,我們需要把CSS文件進行分類。 我們按照CSS的性質和用途,將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”,並以此順序引用(按需求決定是否添加版本號)。 公共型樣式:包括了以下


CSS規範 - 分類方法

SS文件的分類和引用順序

通常,一個項目我們只引用一個CSS,但是對於較大的項目,我們需要把CSS文件進行分類。

我們按照CSS的性質和用途,將CSS文件分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”,並以此順序引用(按需求決定是否添加版本號)。

  1. 公共型樣式:包括了以下幾個部分:“標簽的重置和設置預設值”、“統一調用背景圖和清除浮動或其他需統一處理的長樣式”、“網站通用佈局”、“通用模塊和其擴展”、“元件和其擴展”、“功能類樣式”、“皮膚類樣式”。
  2. 特殊型樣式:當某個欄目或頁面的樣式與網站整體差異較大或者維護率較高時,可以獨立引用一個樣式:“特殊的佈局、模塊和元件及擴展”、“特殊的功能、顏色和背景”,也可以是某個大型控制項或模塊的獨立樣式。
  3. 皮膚型樣式:如果產品需要換膚功能,那麼我們需要將顏色、背景等抽離出來放在這裡。

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. 重置(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{}),具體詳見命名規則的擴展相關項。

功能類和皮膚類樣式為表現化的樣式,請不要濫用!以上順序可以按需求適當調整。

以上分類的命名方法詳見命名規則

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"。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 昨天在QQ群上看到一道題,“求1-1000中能被3或5整除的數字之和” 其中看到很有趣的解法二,最開始還是挺迷惑的, 後來想了下,再經人指點,就覺得茅塞頓開。 第一種解法很普遍,就是將1000以內的數都遍歷一遍,只要有整除3或者整除5的數,就將其加起來,最終得到一個總的和。 讓我感興趣的是第二種解法
  • 1、先引入含有如下插件的js (function($){ //插件 $.extend($,{ //命名空間 sortTable:{ sort:function(tableId,Idx,that){ var table = document.getElementById(tableId); var t
  • 一直在call上花了很多時間,直接上代碼吧, <body> <div class="box" id="box"> <div class="child">111</div> <div class="child">222</div> <div class="child">333</div> <div c
  • 分享一款基於css3 transition圖文動畫顯示特效。這是一款滑鼠懸停在圖片上動畫顯示文字描述CSS3特效。效果圖如下: 線上預覽 源碼下載 實現的代碼。 html代碼: <div class="box"> <div class="he_border1"> <img class="he_bor
  • 說明:左邊是markdown的語法 右邊是預覽。(我這裡用了黑色的背景,一般白色較多) 1. 標題 2.列表 3.引用 (1)一層引用 (2)多層引用 4.圖片(如果是本地:按照語法寫圖片路徑;如果是網頁上,比如簡書,可以直接把圖片拖進編輯處就可以了) 5.添加文字鏈接 6.使文字粗體顯示 (1)兩
  • 現在專註於移動端開發項目,對於動畫這個點是非常重要的,每當我遇到一個新的知識點,我就會和大家一起分享 animation-fill-mode :把物體動畫地從一個地方移動到另一個地方,並讓它停留在那裡 定義和用法 animation-fill-mode 屬性規定當動畫不播放時(當動畫完成時,或當動畫
  • 結論 不多說,想給出結論 關於this到底指向誰這個問題,我很同意鳥哥給出這麼一個結論 ”This關鍵字永遠都指向函數(方法)的所有者” (參考文章1). 作為函數調用時 直接調用函數屬於全局性調用,因此this指向全局對象(window對象),this.name為"global"。 作為構造函數調
  • 1.with的基本概念 with語句的作用是將代碼的作用域設置到一個特定的作用域中,目的是為了簡化多次編寫訪問同一對象的工作。基本語法如下: with (expression) statement 下麵我們舉個例子,來具體說明下: var qs = location.search.substring
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...