class命名规范

class语法

• 类名选择器

.类名{
    属性1：属性值1；
    属性2：属性值2；
    属性3：属性值3；
}

• 标签

<p class="类名"></p>

注意：

1.类选择器使用 "." 进行标识，后面紧跟类名

2.长名称或词组可以使用中横线来为选择器命名

3.不要使用纯数字、中文等命名，尽量使用英文字母来表示

class命名规范

常见class关键词

• 布局类：header, footer, container, main, content, aside, page, section

• 包裹类：wrap, inner

• 区块类：region, block, box

• 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

• 列表类：list, item, field

• 主次类：primary, secondary, sub, minor

• 大小类：s, m, l, xl, large, small

• 状态类：active, current, checked, hover, fail, success, warn, error, on, off

• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

  1. 导航：nav
  2. 主导航：mainbav
  3. 子导航：subnav
  4. 顶导航：topnav
  5. 边导航：sidebar
  6. 左导航：leftsidebar
  7. 右导航：rightsidebar
  8. 菜单：menu
  9. 子菜单：submenu
  10. 标题: title
  11. 摘要: summary

• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,

• 星级类：rate, star

• 分割类：group, seperate, divider

• 等分类：full, half, third, quarter

• 表格类：table, tr, td, cell, row

• 图片类：img, thumbnail, original, album, gallery

• 语言类：cn, en

• 论坛类：forum, bbs, topic, post

• 方向类：up, down, left, right

• 功能类

  1. 标志：logo
  2. 广告：banner
  3. 登陆：login
  4. 登录条：loginbar
  5. 注册：regsiter
  6. 搜索：search
  7. 功能区：shop
  8. 标题：title
  9. 加入：joinus
  10. 状态：status
  11. 按钮：btn
  12. 滚动：scroll
  13. 标签页：tab
  14. 文章列表：list
  15. 提示信息：msg
  16. 当前的: current
  17. 小技巧：tips
  18. 图标: icon
  19. 注释：note
  20. 指南：guild
  21. 服务：service
  22. 热点：hot
  23. 新闻：news
  24. 下载：download
  25. 投票：vote
  26. 合作伙伴：partner
  27. 友情链接：link
  28. 版权：copyright

• 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

  例如：text改为txt、delete改为del，这里针对单个单词组合命名，对词组单词的组合建议不使用缩写或简写。

参考文档：

class命名规范