CSS 命名規範 —— BEM 思想
阿新 • • 發佈:2019-03-25
att 易懂 clas tro ofo -m div 修飾符 sea
Part.1 何為 BEM?
BEM :Block ( 塊 ) 丶Element ( 元素 ) 丶Modifier ( 修飾符 )
出 處:是由 Yandex 團隊提出的一種前端命名方法論
優 點:命名方式條理清晰丶易懂;更加適用於團隊合作項目
Part.2 例如
- .block{}
- .block__element{}
- .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 思想