网易NEC命名规范笔记

写完一个30多个页面的项目,代码冗余和命名污染确实很头大,代码冗余用less可以尽可能的减少,命名污染问题看了网易的NEC规范,发现非常不错,结合了下less,做个总结

前提:放弃id,统一用class命名;属性间不换行且重要的属性靠前原则;

  1. 建reset.less(预设样式,功能样式),mixin.less(元素内复用的样式),common.less(公共样式)三个文件,对应的用来放置预设样式he
  2. 布局(grid):(.g-)开头,页面分割成块,一般有.g-head,.g-body,.g-sidebar,.g-foot等
  3. 模块(module):(.m-)开头,布局的块里再细分出几个模块,一般有.m-nav,.m-log,.m-news,.m-list等
  4. 公共模块(common-module):(.cm-)开头,有些模块是多个页面复用的,将它们统一写在common.less中
  5. 元件(unit):(.u-)开头,模块下多处复用的个体(样式类似即可),写在common.css中用less定制,一般有.u-btn,-u-input等
  6. 功能(function):(.f-)开头,类似清除浮动,文本溢出之类的,如.f-clearFix,.f-ellipsis等
  7. 状态:(.is-)开头,如果一个元素有另一个状态(显示隐藏),触发时加.is-active,.is-dis等
  8. js抓取类:(.j-)开头,为了方便js获取DOM元素,加在需要DOM操作的类上,如.j-nav等

依照上述规则写出来的代码应该是下面这样,结构清晰,结合less,应该可以初步很好地解决代码冗余和命名污染的问题了,等下一个项目实践后再来修改一下

.g-index{
  .g-head{
    .m-search{
      .u-icon-search{...}
      .u-ipt{...}
    }
    .cm-nav{
      ul{
        li{...}
        li{...}
        li{...}
      }
    }
  }
  .g-body{...}
  .g-foot{...}
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值