[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)