className命名

原则上，避免因为className的命名而影响开发效率，className的命名应该尽量简单、清晰、明确、周到，而且尽量避免使用自创缩写（如bg代表background等较为公认的可以使用），全部字母为小写，单词之间统一使用 “-” 连接。

className不仅仅是为了css的样式书写，更重要的作用在于语义化，良好的语义化className有利于后期维护、协助开发者理解HTML的作用。

命名原则

• 为保证css的作用域，最顶级的className需要为唯一命名。

<div class="trade-histoty-main">
  <div></div>
</div>

• 每一个功能模块的父级(称为祖先模块)，进行单独命名，子孙继承该命名。 由于css预处理器的嵌套功能，在命名上推荐以前一个name后缀为子元素前缀。

<div class="trade-histoty-main"> // 最外层为顶级
  <div class="orderbook"> // 单独的功能模块
    <div class="orderbook-main"> // 继承父级后缀
      <div class="main-left"></div> // 继承父级后缀
      <div class="computer"> // 功能内部的功能模块
        <div class="computer-main"> // 继承父级后缀
          <div class="main-left"></div> // 继承父级后缀
        </div>
      </div>
    </div>
  </div>
</div>

• 当为最后一级行内元素时，可以不写className（语义化的唯一块级标签也可以不书写）。

<div class="module">
  <div class="module-cover">
    <span>last</span>
  </div>
  <div class="module-info"></div>
</div>

• 当为最后一级元素时，但不应用同一个样式或功能特性，需要写className以区分。

<div class="module">
  <div class="module-cover"></div>
    <span class="cover-left">left</span>
    <span class="cover-mid">mid</span>
    <span class="cover-right">right</span>
  <div class="module-info"></div>
</div>

• 使用html5的语义化标签时，若该标签同级唯一，可不书写className。

<div class="trade-histoty">
  <header> // 同级唯一
    <div class="header-left">
    </div>
  </header>
  <section class="history"> // 同级不唯一
    <div class="history-left">
    </div>
  </section>
  <section class="current"> // 同级不唯一
    <header></header> // 同级唯一
    <div class="current-left">
    </div>
  </section>
</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	容器，包，一般用于最外层