网易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{...}
}