背景
在为大型网站写页面的css时候，经常会出现如下的css编写效果。
.container .form .input .warpper .icon {
/*写入你需要的css*/
}
.container .form .text {
/*写入你需要的css*/
}
.page .warpper .layout .content{
/*写入你需要的css*/
}
这样的css编写效果就是传统的命名空间的方式写css，它很好得解决了编写单纯全局css互相影响的问题，但是另外一方面它也引申出了一些问题：
- 维护css的时候，只看HTML，我们无法知道当前css的作用范围，css的表现不够一目了然。
- 如果我要覆盖css的样式，可能我就需要利用css的优先级的规则去覆盖原有的css，这样就会导致css优先级竞争。
- css编写的时候复用性不高，当存在多个样式一致的时候，我们可能会选择减少命名空间的方式来提升当前css的作用范围，但是可能会导致css样式冲突的问题。
为了解决这些问题，我人们的选择也很多，有 BEM，OOCSS，SMACSS，Atomic Design 等许多选择。
CSS 规范究竟在解决什么问题
- 我必须立即知道编辑一个 class 是否安全，会不会干扰其他 CSS。这是最重要的，特别是当我需要在短时间内进行修改时。我不想因为改变一处而破坏别的东西。
- 我必须立即知道一个 class 放在这个伟大工程中的什么地方，以防止大脑过载。这样我就可以快速修改 style，而不必在整个工程里前后引用。
- class 必须 尽可能少，因为看到一长串的 class 时我头很晕。
- 我必须立即知道一个组件是否使用了 JavaScript，所以如果我改变了它的 CSS，我不会意外地破坏任何组件。
什么是BEM
如果你从未接触过BEM，那么你第一次接触到BEM的时候它是长这个样子的。
.block { /* styles */ }
.block__element { /* styles */ }
.block--modifier { /* styles */ }
期中的BEM分别对应block ， element 和 modifier。
什么是块
在规范中，块表示一个组件的意思，这样看上去有点抽象，我们可以通过例子来学习，假设你要写一个按钮的组件。我们只需要设置了一个 .button 类的按钮，然后可以在任何<button>按钮上使用该类，就可以生成该组件的传统样式。
使用.button而不是用button的原因是因为类允许无限的可重用性，而即使是最基本的元素也可能改变样式。
但是在实际的项目使用中，我们会发现一个按钮可能是大按钮，可能是小按钮，也可能是红色的，或者黄色的。于是就引申出了BEM的modifier。
什么是修饰符
修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。
假如我们要添加一个默认按钮，一个主要按钮，一个大按钮，一个小按钮，一个主要的小按钮。
我们可以这样:
<button class=".button .button--default"></button>
<button class=".button .button--primary"></button>
<button class=".button .button--large"></button>
<button class=".button .button--small"></button>
<button class=".button .button--primary .button--small"></button>
如果会scss或任何其他预处理器的mixin，我们就可以减少一些class，写成这样:
<button class=".button--default"></button>
<button class=".button--primary"></button>
<button class=".button--large"></button>
<button class=".button--small"></button>
<button class=".button--small--primary"></button>
什么是元素
元素是块的子节点。为了表明某个东西是一个元素，你需要在块名后添加 __element。所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。
<form class="form" action="">
<div class="form__row">
</div>
</form>
<style>
.form__row { /* styles */ }
</style>
BEM 元素有两个优点 ：
你可以让 CSS 的优先级保持相对扁平。
你能立即知道哪些东西是一个子元素。
总结
以上就是简单的BEM规范和使用方法的简单介绍。基本的BEM规范的使用可以解决之前提到的一些问题：
class 的数量必须尽可能少 ，防止了css的优先级竞争。
立即知道一个 class 放在这个伟大工程中的什么地方，以防止大脑过载。
但是还有在实际应用中还有一些问题没有解决。
我必须 立即知道组件是否使用 JavaScript 。
我必须 立即知道编辑一个 class 是否安全,会不会干扰其他 CSS。
剩下的问题，我们就需要命名空间配合BEM来解决。
DIV+CSS命名参考表
网页公共命名
| #wrapper 页面外围控制整体布局宽度 | #container或#content 容器,用于最外层 |
|---|---|
| #layout 布局 | #head, #header 页头部分 |
| #foot, #footer 页脚部分 | #nav 主导航 |
| #subnav 二级导航 | #menu 菜单 |
| #submenu 子菜单 | #sideBar 侧栏 |
| #sidebar_a, #sidebar_b 左边栏或右边栏 | #main 页面主体 |
| #tag 标签 | #msg #message 提示信息 |
| #tips 小技巧 | #vote 投票 |
| #friendlink 友情连接 | #title 标题 |
| #loginbar 登录条 | #searchInput 搜索输入框 |
| #hot 热门热点 | #search 搜索 |
| #search_output 搜索输出和搜索结果相似 | #searchBar 搜索条 |
| #search_results 搜索结果 | #copyright 版权信息 |
| #branding 商标 | #logo 网站LOGO标志 |
| #siteinfo 网站信息 | #siteinfoLegal 法律声明 |
| #siteinfoCredits 信誉 | #joinus 加入我们 |
| #partner 合作伙伴 | #service 服务 |
| #regsiter 注册 | arr/arrow 箭头 |
| #guild 指南 | #sitemap 网站地图 |
| #list 列表 | #homepage 首页 |
| #subpage 二级页面子页面 | #tool, #toolbar 工具条 |
| #drop 下拉 | #dorpmenu 下拉菜单 |
| #status 状态 | #scroll 滚动 |
| .tab 标签页 | .left .right .center 居左、中、右 |
| .news 新闻 | .download 下载 |
| .banner 广告条(顶部广告条) | #summary 摘要 |
网友评论