[TOC] 要注意，我使用的基于 BEM 的命名方式是经过 [Nicolas Gallagher 修改过的](http://nicolasgallagher.com/about-html-semantics-front-end-architecture)。这篇文章中介绍的这种命名技术并不是原始的 BEM，但却是一个我更喜欢的改进版。无论实际使用了什么样的符号，它们其实都是基于同样的 BEM 原则。 命名约定的模式如下： ~~~css .block{} .block-descendant{} .block__element{} .block--modifier{} .block__element--modifier{} ~~~ * `.block`代表了更高级别的抽象或组件。 * `.block-descendant`代表`.block`的后代`descendant` * `.block__element`代表`.block`的后代，用于形成一个完整的 block 的整体。 * `.block--modifier`代表.`block`的不同状态或不同版本。 之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定，如： ~~~css .site-search{} /* 块 */ .site-search__field{} /* 元素 */ .site-search--full{} /* 修饰符 */ ~~~ > http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ # 参考 https://github.com/suitcss/suit https://segmentfault.com/a/1190000000391762 [CSS规范--BEM入门 - SegmentFault 思否](https://segmentfault.com/a/1190000009953887)