當(dāng)你看到一個class的時候牡昆，你想得到什么信息？###
- 這個class用在什么地方征唬，作用是什么？
- 是否在其他地方也有使用該class茁彭，修改會不會引起其他地方的樣式問題总寒？
- class 是否在js中被使用？
- ...
此時理肺，你最想一眼看到這個class就解決以上所有的問題摄闸，而BEM你值得擁有
什么是BEM
BEM（塊，元素妹萨，修飾符）由 Yandex 團隊提出的一種前端 CSS 命名方法論贪薪。是基于組件的Web開發(fā)的一種前端命名方法論，主要針對CSS眠副。其背后的想法是將用戶界面分為獨立的塊画切。即使使用復(fù)雜的UI，這也使界面開發(fā)變得容易和快速囱怕，并且允許重用現(xiàn)有代碼而無需復(fù)制和粘貼霍弹。
優(yōu)勢
- 避免樣式?jīng)_突
- 減小名稱長度
- 提高可閱讀性
- 增加樣式重用
怎么使用BEM
- Block
一個功能獨立的頁面組件，可以重復(fù)使用
塊不應(yīng)影響其環(huán)境娃弓，這意味著您不應(yīng)設(shè)置塊的外部幾何形狀（邊距）或位置
<!--
good
-->
<div class = "header" > </ div >
<!--
bad
red-text 是描述外觀
-->
<div class = "red-text" > </ div >
- Element
塊的復(fù)合部分典格，不能單獨使用
元素全名的結(jié)構(gòu)為 block-name__element-name
<!-- 塊 `search-form` -->
<form class="search-form">
<!-- `input button` 元素 在 `search-form` 塊中 -->
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
一個元素始終是塊的一部分，而不是另一個元素台丛，因此元素名稱不可定義為 block__elem1__elem2 的層次結(jié)構(gòu)
<!--
good
遵循 `block-name__element-name`
-->
<form class="search-form">
<div class="search-form__content">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</div>
</form>
<!--
bad
' search-form__content__button ' 不遵循 `block-name__element-name`
-->
<form class="search-form">
<div class="search-form__content">
<input class="search-form__content__input">
<button class="search-form__content__button">Search</button>
</div>
</form>
元素始終是一個塊的一部分耍缴，您不應(yīng)該與該塊分開使用
<form class="search-form">
<!--
good
元素在塊 search-form 的里面
-->
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
<form class="search-form"></form>
<!--
bad
元素不在塊 search-form 的里面
-->
<input class="search-form__input">
<button class="search-form__button">Search</button>
- Modifier
定義塊或元素的外觀，狀態(tài)或行為的實體
- Boolean
修飾符全名的結(jié)構(gòu)遵循以下模式：- block-name_modifier-name
- block-name--modifier-name
- block-name_element-name_modifier-name
- block-name_element-name--modifier-name
<form class="search-form search-form_focused">
<input class="search-form__input">
<!-- 'disabled' 是 'button' 的元素 -->
<button class="search-form__button search-form__button_disabled">Search</button>
</form>
- Key-value
修飾符全名的結(jié)構(gòu)遵循以下模式：- block-name_modifier-name_modifier-value
- block-name_modifier-name--modifier-value
- block-name__element-name_modifier-name_modifier-value
- block-name__element-name_modifier-name--modifier-value
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<!--
good
`button` 的修飾符 `size` 的值是 `m`
-->
<button class="search-form__button search-form__button_size_m">Search</button>
</form>
<form class="search-form
search-form_theme_islands
search-form_theme_lite">
<input class="search-form__input">
<!--
bad
不可同時使用兩個不同值的相同修飾符
-->
<button class="search-form__button
search-form__button_size_s
search-form__button_size_m">
</button>
</form>
不能將修飾符與修飾的塊或元素隔離使用挽霉。修飾符應(yīng)更改實體的外觀防嗡，行為或狀態(tài)，而不是替換它
<!--
good
-->
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
<!--
bad
缺少了塊名稱 'search-form'
-->
<form class="search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
在修飾符和元素名稱中添加塊名稱的好處
- 有助于減少一個塊的元素和修飾符對另一個塊的實現(xiàn)的影響
- 可更清楚的知道修飾符應(yīng)用于該DOM節(jié)點上的哪個實體
- 唯一名稱使查找代碼或文件系統(tǒng)中的實體變得更加容易
什么時候應(yīng)該用 BEM 格式
- 使用 BEM 的訣竅是侠坎，你要知道什么時候哪些東西是應(yīng)該寫成 BEM 格式的蚁趁。
- 并不是每個地方都應(yīng)該使用 BEM 命名方式。當(dāng)需要明確關(guān)聯(lián)性的模塊關(guān)系時实胸，應(yīng)當(dāng)使用 BEM 格式他嫡。
- 比如只是一條公共的單獨的樣式，就沒有使用 BEM 格式的意義：
.hide {
display: none !important;
}
命名規(guī)范
雙下劃線風(fēng)格 block-name__elem-name--mod-name--mod-val
- 名稱以小寫拉丁字母書寫庐完。
- BEM實體名稱中的單詞由連字符（-）分隔钢属。
- 元素名稱與塊名稱之間用雙下劃線（__）分隔。
- 布爾修飾符用雙連字符（--）與塊或元素的名稱分隔门躯。
- 修飾符的值與其名稱之間用雙連字符（--）分隔淆党。
（重要提示： 注釋（--）中的雙連字符可能會在HTML文檔驗證期間導(dǎo)致錯誤。）
CamelCase style blockName-elemName_modName_modVal
- 名稱以拉丁字母書寫。
- 名稱中的每個單詞都以大寫字母開頭宁否。
- 塊窒升，元素和修飾符名稱的分隔符與標(biāo)準(zhǔn)方案中的相同
React命名范式 BlockName-ElemName_modName_modVal
- 名稱以拉丁字母書寫缀遍。
- 塊和元素的名稱以大寫字母開頭慕匠。修飾符的名稱以小寫字母開頭。
- 名稱中的每個單詞都以大寫字母開頭域醇。
- 元素名稱與塊名稱之間用單個連字符（-）分隔台谊。
- 修飾符的名稱和值之間的分隔符與標(biāo)準(zhǔn)方案中的相同。
沒有命名空間樣式 _available
- 名稱以拉丁字母書寫譬挚。
- 修飾符之前不包括塊或元素的名稱
此命名方案限制了mixs的使用锅铅，因為它無法確定修飾符屬于哪個塊或元素。
命名名稱使用簡寫
命名名稱使用全寫
常用的CSS命名
- vant 組件 css 命名
使用的命名是雙下劃線風(fēng)格：block-name__element-name--modifier-name
<div class="van-doc">
<div class="van-doc-header">
<div class="van-doc-row">
<div class="van-doc-header__top">
<a class="van-doc-header__logo">搜索</a>
<ul class="van-doc-header__top-nav">
<li class="van-doc-header__top-nav-item">
<a class="van-doc-header__logo-link">
</li>
</ul>
</div>
</div>
</div>
<div class="van-doc-container van-doc-row van-doc-container--with-simulator">
......
</div>
</div>
- weui 組件 css 命名
使用的命名是 React命名風(fēng)格：block-name__element-name_modifier-name
<div class="page button js_show">
<div class="page__hd">
<h1 class="page__title">Button</h1>
<p class="page__desc">按鈕</p>
</div>
<div class="page__bd">
<div class="button-sp-area">
<a class="weui-btn weui-btn_primary">頁面主操作</a>
<a class="weui-btn weui-btn_loading">頁面主操作</a>
<a class="weui-btn weui-btn_disabled>頁面主操作</a>
<a class="weui-btn weui-btn_default">頁面次要操作</a>
<a class="weui-btn weui-btn_warn">警告類操作</a>
</div>
....
<div class="button-sp-area cell">
校驗 BEM 規(guī)范工具
stylelint-selector-bem-pattern
