ClassName 命名

Tips

京东凹凸实验室前端开发规范;

内容 👹

ClassName 的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “-” 连接,模块直接用“_” 连接,

基于姓氏命名法 （继承 + 外来）

祖先模块不能出现下划线，除了是全站公用模块，如 mod_ 系列的命名：

正例
<div class="modulename">
	<div class="modulename_info">
		<div class="modulename_son"></div>
		<div class="modulename_son"></div>
		...
	</div>
</div>

<!-- 这个是全站公用模块，祖先模块允许直接出现下划线 -->
<div class="mod_info">
	<div class="mod_info_son"></div>
	<div class="mod_info_son"></div>
	...
</div>

在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀

<div class="modulename">
  <div class="modulename_cover"></div>
  <div class="modulename_info"></div>
</div>

当子孙模块超过 4 级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块

正例
<div class="modulename">
  <div class="modulename_cover"></div>
  <div class="modulename_info">
    <div class="modulename_info_user">
      <div class="modulename_info_user_img">
        <img src="" alt="" />
        <!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
        <div class="miui_tit"></div>
        <div class="miui_txt"></div>
        ...
      </div>
    </div>
    <div class="modulename_info_list"></div>
  </div>
</div>

模块命名

全站公共模块：以 mod_ 开头

<div class="mod_yours"></div>

业务公共模块：以 业务名mod 开头

<div class="paipai_mod_yours"></div>

常用命名推荐

注意：ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做 ClassName，因为有些浏览器插件（Chrome 的广告拦截插件等）会直接过滤这些类名，因此

<div class="ad"></div>

这种广告的英文或拼音类名不应该出现 另外，敏感不和谐字眼也不应该出现，如：

<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
ClassName含义
about关于
account账户
arrow箭头图标
article文章
aside边栏
audio音频
avatar头像
bg,background背景
bar栏（工具类）
branding品牌化
crumb,breadcrumbs面包屑
btn,button按钮
caption标题，说明
category分类
chart图表
clearfix清除浮动
close关闭
col,column列
comment评论
community社区
container容器
content内容
copyright版权
current当前态，选中态
default默认
description描述
details细节
disabled不可用
entry文章，博文
error错误
even偶数，常用于多行列表或表格中
fail失败（提示）
feature专题
fewer收起
field用于表单的输入区域
figure图
filter筛选
first第一个，常用于列表中
footer页脚
forum论坛
gallery画廊
group模块，清除浮动
header页头
help帮助
hide隐藏
hightlight高亮
home主页
icon图标
info,information信息
last最后一个，常用于列表中
links链接
login登录
logout退出
logo标志
main主体
menu菜单
meta作者、更新时间等信息栏，一般位于标题之下
module模块
more更多（展开）
msg,message消息
nav,navigation导航
next下一页
nub小块
odd奇数，常用于多行列表或表格中
off鼠标离开
on鼠标移过
output输出
pagination分页
pop,popup弹窗
preview预览
previous上一页
primary主要
progress进度条
promotion促销
rcommd,recommendations推荐
reg,register注册
save保存
search搜索
secondary次要
section区块
selected已选
share分享
show显示
sidebar边栏，侧栏
slide幻灯片，图片切换
sort排序
sub次级的，子级的
submit提交
subscribe订阅
subtitle副标题
success成功（提示）
summary摘要
tab标签页
table表格
txt,text文本
thumbnail缩略图
time时间
tips提示
title标题
video视频
wrap容器，包，一般用于最外层
wrapper容器，包，一般用于最外层

BEM 命名法

  • BEM 其实是块（block）、元素（element）、修饰符（modifier）的缩写
  • block 代表更高级别的抽象或组件
  • block__element 代表 block 的后代，用于形成一个完整的 block 的整体
  • block--modifier 代表 block 的不同状态或不同版本
.block {
}
.block__element {
}
.block--modifier {
}

常用规范

  • blockelementmodifier 包含多个单词时, 用一个中划线-链接,例如
  • el-dropdown-menuel-button
  • block 和 element 用双下划线__链接, 例如
  • 表单项 form__item
  • 导航项 menu__item
  • element 和 modifier 用双中划线--链接, 如表示按钮的不同状态,例如
  • 默认：el-button--default
  • 成功：el-button--success
  • 用 js 控制样式时,css 命名用 is-开头,例如 is-success、is-failed、is-disabled

常用的元素名

  • 表单元素 form form-item input select radio checkbox switch rate datePicker
  • 导航元素 nav subnav menu tab
  • 提示 alert message messageBox notification
  • 数据展示 table process tree pagiantion
  • 其他 button icon

如何用好 BEM 命名法

页面命名

用 page-开头, page 表示这是一个页面, 而不是组件。 给页面命名时，BEM 可以搭配 css-module 一起使用。既能保证打包后选择器的唯一，又容易调试。例如

# 编译前 .page-index {
}
.page-zufang {
}

# 编译后 .page-index-70yGFBg1eKjbSIwN {
}
.page-zufang-mFTy62A1t83zjDbh {
}

公共组件命名

  • 用 base-开头, base 表示公共组件。
  • 公共组件的每一个 class 名，带上组件的作用域前缀,如 base-input__inner 的作用域前缀是 base-input。
  • 选择器不宜嵌套, 让选择器的权重尽可能低。原因如下: base-input__inner 已经具有有作用域了，无需再嵌套。 由于组件选择器权重较低，在组件外修改组件样式时，覆盖样式非常方便。
<div
  class="base-input"
  > <input
  class="base-input__inner"/
  > </div
  > #
  选择器避免嵌套，降低选择器权重
  .base-input {
}
.base-input__inner {
}

局部组件命名

  • 用 the-开头, the 表示某一特定的组件。
<div
  class="the-header"
  > <div
  class="the-header__title"
  /
  > <div
  class="the-header__desc"
  > </div
  > #
  选择器避免嵌套，降低选择器权重
  .the-header {
}
.the-header__title {
}
.the-header__desc {
}

个人约束

常见用法

  • 模块前缀后加__
  • 多个单词以-隔开
  • 不同模块以_隔开
  • 模块修饰符 --
  • 嵌套 大于3层考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块
模块前缀__模-块-1__模-块-2--修饰词

page__module_module-1_module-1-1--modifier
com__com-1
base__button-1
the__the-1
box__box-1
mod__moda-1
wrap__wrap-1

// 超过三层
com__module
    module_1module
        module_2module-3module
            // 祖先模块独立缩写
            m123_4module

模块前缀

前缀含义
page页面
com普通组件
base基础组件
box宽度分离时,用于元素尺寸的设置
mod全局公用模块
wrap模块最外层包裹块
Last Updated:
Contributors: heyuan