清華大佬耗費(fèi)三個(gè)月吐血整理的幾百G的資源，免費(fèi)分享！....>>>

不符合NEC規(guī)范的選擇器用法

• .class{}

  不要以一個(gè)沒有類別的樣式作為主選擇器，這樣的選擇器只能作為后代選擇器使用，比如.m-xxx .class{}。

• .m-xxx div{}

  不要以沒有語義的標(biāo)簽作為選擇器，這會(huì)造成大面積污染，除非你可以斷定現(xiàn)在或?qū)砟愕倪@個(gè)選擇器不會(huì)污染其他同類。

• .g-xxx .class{}

  不要在頁面布局中使用后代選擇器，因?yàn)檫@個(gè)后代選擇器可能會(huì)污染里面的元素。

• .g-xxx .m-yyy{}.g-xxx .u-yyy{}

  不要用布局去控制模塊或元件，模塊和元件應(yīng)與布局分離獨(dú)立。

• .m-xxx .f-xxx{}.m-xxx .s-xxx{}

  不要通過模塊或其他類來重定義或修改或添加已經(jīng)定義好的功能類選擇器和皮膚類選擇器。

• .m-xxx .class .class .class .class{}

  不要將選擇器寫的過于冗長，這會(huì)額外增加文件大小并且限制了太小范圍的選擇器，使樹形結(jié)構(gòu)過于嚴(yán)格應(yīng)用范圍過于局限，建議3-4個(gè)長度之內(nèi)寫完。

  選擇器并不需要完整反映結(jié)構(gòu)嵌套順序，相反，能簡則簡。

• .m-xxx .m-yyy .zzz{}

  不要越級(jí)控制，如果.zzz是.m-yyy的后代選擇器，那么不允許.m-yyy之外的選擇器控制或修改.zzz。

  此時(shí)可以使用.m-yyy的擴(kuò)展來修改.zzz，比如.m-yyy-1 .zzz{}。

擴(kuò)展類使用錯(cuò)誤

擴(kuò)展類必須和其基類同時(shí)使用于同一個(gè)節(jié)點(diǎn)。

• 錯(cuò)誤：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"。