Part.1 何為 BEM？

BEM ：Block ( 塊 ) 丶Element ( 元素 ) 丶Modifier ( 修飾符 )

出 處：是由 Yandex 團隊提出的一種前端命名方法論

優 點：命名方式條理清晰丶易懂；更加適用於團隊合作項目

Part.2 例如

1. .block{}
2. .block__element{}
3. .block--modifier{}

• .block 最高級-塊
• .block__element 代表.block的後代
• .block--modifier代表.block的不同狀態或不同版本

Part.3 如何使用？

常規命名方式如下：

<div class="site-search full">

<input type="text" class="field">

<input type="Submit" value ="Search" class="button">

</div>

BEM 改造如下：

<div class="site-search site-search--full">

<input type="text" class="site-search__field">

<input type="Submit" value ="Search" class="site-search__button">

</div>

區別：改造後我們能清晰地看到有個叫.site-search的塊，他內部是一個叫.site-search__field的元素，並且.site-search還有另外一種形態叫.site-search--full。顯而易見，後者條理更加清晰明了！

CSS 命名規範 —— BEM 思想