命名方式
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