浙江爱信诺前端规范

CSS规范 - 典型错误

不符合爱信诺前端规范的选择器用法

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