Web技术中心代码规范-典型错误

不符合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"。

转载: http://nec.netease.com/    网易NEC前端代码规范
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值