最近在写 CSS 的时候遵循了一个叫 BEM 的思想，这东西在网上评价两极分化比较严重，我之前受评论影响，觉得 BEM 的语法和一坨屎一样难看。
来来来，先看看 BEM 的语法：
.block {} //块（block）
.block__element {} //元素（element）
.block--modifier {} //修饰符（modifier）
运用在实际项目中是这个样子的：
.article {} // 文章块
.article__header {} // 文章头部元素
.article__header .title {} // 文章头部元素 的标题
.article__footer {} // 文章尾部元素
.article--project {} // 文章修饰符 project 页面
.article--about {} // 文章修饰符 about 页面
嗯，果然是战斗名族 (yandex) 的味道。
换做以前啊，看到一个 CSS class 如 article-header
是分不清楚这是否有上下文的，很可能就是即兴命名。再看看 BEM 命名
article__header，应为有了 BEM 约定，明确可以知道
article 是一个模块，而 header
是他的元素（子类）。
当然啦，今天讲的不是 BEM 本身，而是他的思想。有没有想过为什么会有 BEM 这种如此丑陋难看恶心语法？那全拜 CSS 没有 namespace （命名空间）所赐，必须弄个什么奇奇怪怪的分隔符当 namespace。
在文件夹中，如果不考虑用子文件夹，但是各文件又有从属关系，也可以运用 BEM 的思想去构建。
比如有如下几个文件。
article.php
about.php
header.php
footer.php
article.php 是文章模版，而 about.php 是 article.php 的小改款。
article.php 和 about.php 都需要引入 header.php 和 footer.php，不过一眼看过去并不能看到他们之间的从属关系，那么可以改成这样：
article.php
about.php
article_header.php
article_footer.php
这样会好一些，但是这样就看不出 about 也引用了 header 和 footer，所以把他们用 BEM 的方式修改一遍：
article.php
article--about.php
article__header.php
article__footer.php
好家伙，这样一改就显得非常清晰了。
当然，如果在允许有子文件夹的情况下，并且用上 BEM 思想，就会变成这样 hhhhh：
article.php
| -- (DIR)
| about.php
| __ (DIR)
| header.php
| footer.php