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"。
發佈了337 篇原創文章 · 獲贊 40 · 訪問量 243萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章