CSS命名规范总结
BEM 命名给 CSS 以及 html 提供清晰结构，命名空间提供更多信息，模块化提高代码的重用，以达到 CSS 命名语义化、可重用性高、后期维护容易、加载渲染快的要求。
BEM 命名
BEM（Block，Element，Modifier）是一个基于组件方式的 web 开发方法。他的基本思想是将用户界面分为独立的模块。即使是一个复杂的 UI 界面，也会使得用户界面开发简单而迅速，，并且允许重用现有的代码，而不是复制粘贴。
BEM 是一种真正消除不确定性的命名方式，它使得结构样式更加清晰，我们有足够的信心做任何修改。一般用小写字母。
- block：模块，名字单词间用
-连接 - element：元素，模块的子元素，以
__与 block 连接 - modifier：修饰，模块的变体，定义特殊模块，以
--与 block 连接
例如：
.user-home-nav
.user-home-nav-item--small
.user-home-nav-item__icon
.user-home-nav-item__text
命名空间 + 模块/元素名
命名空间
即所属专有空间的专有名词，常由项目组内部规定，可用英文字母缩写，需与常用名词有所区分，减少重复命名的可能性：
.story-hub-main
.sh-main
.story-card-layout
.sc-layout
常用模块/元素名
- 头：header
- 内容：content/container
- 尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 页面外围控制整体布局宽度：wrapper
- 左右中：left right center
- 登录条：loginbar
- 标志：logo
- 广告：banner
- 页面主体：main
- 热点：hot
- 新闻：news
- 下载：download
- 子导航：subnav
- 菜单：menu
- 子菜单：submenu
- 搜索：search
- 友情链接：friendlink
- 页脚：footer
- 版权：copyright
- 滚动：scroll
- 内容：content
- 标签页：tab
- 文章列表：list
- 提示信息：msg
- 小技巧：tips
- 栏目标题：title
- 加入：joinus
- 指南：guide
- 服务：service
- 注册：register
- 状态：status
- 投票：vote
- 合作伙伴：partner
- 布局：layout
class的命名：
(1)颜色:使用颜色的名称或者16进制代码,如
- .red { color: red; }
- .f60 { color: #f60; }
- .ff8600 { color: #ff8600; }
（2）字体大小,直接使用”font+字体大小”作为名称,如
- .font12px { font-size: 12px; }
- .font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
- .left { float:left; }
- .bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
- .barnews { }
- .barproduct { }