1. 基本规则
- 使用小写
- 使用英文，而不是拼音
- 使用短横线（-）而不是下划线（_）做连接符（好处：①少按一次 shift； ②区别于 js 中变量命名；③IE 兼容性）
- 语义化命名，尽量简洁，但不可模糊
- 尽量不缩写或简写，除非一看就明白的单词如 btn
- 省略小数点前面的 0
- 省略 0 后面的单位
- 慎用 id，id 在 js 中是唯一的，不能多次使用，id 的优先级高于 class，不要滥用。
- CSS 嵌套不要超过一层
- 一个规则包含多个选择器时，每个选择器独占一行
- 每条样式独占一行
- 左大括号与最后一个选择器同行，空格分隔，右大括号独占一行
- 尽量避免使用标签名，尤其时 CSS 嵌套时（浏览器的排版引擎解析 CSS 是基于从右向左（right-to-left）的规则，CSS 嵌套时使用类名可使样式规则能够更快地与渲染树上的节点匹配）
- 十六进制颜色值统一书写（大/小写、是否简写）
注3：
BEM 规范中：
- 名称以小写字母书写
- 名称中的单词用连字符（-）分隔
- 元素由双下划线（__）分隔
- 修饰符由双连字符（—）分隔
2. 模块化分类
重置（reset）：消除默认样式和浏览器差异，通常单独文件，可使用现有的库，如 Normalize.css、 resst.css；
基础（base）：设置基本元素标签的默认样式、模块原件的统一处理样式和背景图等，减少重复劳动，通常根据网站风格、需求设置；
布局（grid/layout）（.g-/.l-）：页面可分为几个部分，一般为头部、主体、主栏、侧栏、尾部等，将一个或多个部分组合即可构成基本页面框架，他们只定义布局，不处理排版或颜色等UI视觉外观；
模块（module）（.m-）：语义化的可复用的较大的整体，如导航、登录、注册、列表、评论、搜索等；
元件（unit）（.u-）：语义化的可复用的较小的个体，不可再分，通常被复用于各种模块中，而不是局限于某个模块，如按钮、输入框、图标、loading等；
功能/助手/工具（function/helper）（.f-/.h-）：不耦合业务逻辑的、可复用的的常用工具样式，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等，不可滥用；
状态（.z-）：模块或布局在特定状态下的外观，通常使用 JavaScript 应用或删除，如，隐藏，扩展，激活等。为状态类样式加入前缀，统一标识，方便识别，经常组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}）；
主题/皮肤（theme/skin）（.t-/.s-）：模块或布局在主题应用时的UI视觉外观，包括文字色、背景色（图）、边框色等；非换肤型网站通常只提取文字色，非换肤型网站不可滥用此类；
钩子（.j-）：用于 JavaScript 调用的选择器，如：j-request、j-open；
功能类和皮肤类样式为表现化的样式，不要滥用，以上顺序可以按需求适当调整。
3. 命名空间常用规则
1. 布局（.g-）
| 语义 | 命名 | 简写 |
|---|---|---|
| 文档 | doc | |
| 头部 | header | |
| 主体 | content | |
| 尾部 | footer | |
| 主栏目 | main | |
| 侧栏目 | side | |
| 容器 | container | |
| 外围包装 | wrap/wrapper/box | |
| 左/中/右 | left/center/right | |
| 上/中/下 | top/middle/bottom |
2. 模块（.m-）、元件（.u-）
| 语义 | 命名 | 简写 |
|---|---|---|
| 导航 | nav | |
| 面包屑 | bread | |
| 菜单 | menu | |
| 选项卡 | tab | |
| 标题（区） | title | |
| 内容（区） | content | |
| 列表 | list | |
| 文章 | article | |
| 评论 | comment | |
| 收藏 | fav | |
| 表格 | table | |
| 表单 | form | |
| 登录 | login | |
| 注册 | register/signup | |
| 商标 | brand | |
| 标识 | logo | |
| 广告 | banner/advertise | ad/adv |
| 搜索 | search | |
| 版权 | copyright | |
| 按钮 | button | btn |
| 输入 | input | |
| 下载 | download | dl |
| 结果 | result | |
| 帮助 | help | |
| 提示 | tip(s) | |
| 对话框 | dialog | |
| 摘要 | summary | |
| 新闻 | news | |
| 指南 | guide | |
| 消息 | message | msg |
| 热点 | hot | |
| 合作伙伴 | partner | |
| 友情链接 | link | |
| 加入我们 | joinus |
3. 功能（.f-）
| 语义 | 命名 | 简写 |
|---|---|---|
| 清除浮动 | clearboth | cb |
| 左/右浮动 | floatleft/floatright | fl/fr |
4. 状态（.z-）
| 语义 | 命名 | 简写 |
|---|---|---|
| 选中 | selected | sel |
| 当前 | current/active | |
| 显示 | show | |
| 隐藏 | hide | |
| 打开 | open | |
| 关闭 | close | |
| 错误 | error | err |
| 不可用 | disabled |
5. 主题/皮肤（.s-）
参考：