css命名规范——NEC与BEM

命名方式

NEC

网易CSS方案:NEC

CSS内部的分类及其顺序:

  • 重置(reset)和默认(base)(tags)
    消除默认样式和浏览器差异,并设置部分标签的初始样式,以减少后面的重复劳动
  • 统一处理
    建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式
  • 布局 grid(g-)
    将页面分割为几个大块,如头部、尾部、主体、侧栏等
  • 模块 module(m-)
    较大整体,如导航、登录注册、列表、评论、搜索等
  • 元件 unit(u-)
    不可再分个体,如按钮、input、loading、图标等
  • 功能 function(f-)
    使用率较高的样式,如清除浮动等
  • 皮肤 skin(s-)
    如文字色、背景色(图)、边框色等
  • 状态(z-)
    如hover,选中等

BEM

Yandex的CSS命名方法论:BEM


  • .block,更高级别的抽象或组件
  • 元素
    .block__element,块的后代元素
  • 修饰符
    .block–modifier,块的不同状态或版本

两者结合使用

可以避免使用BEM导致css命名冗长
使用NEC区分出元件后,再对元件使用BEM命名模式

如:

  • g_header,g_footer,g_main,g_cont
  • m_title
    u_title,u_title–2
  • m_drawList
    u_item,u_item–0,u_drawbg,u_drawName,u_img