BEM 規範思維 – 讓 CSS 更利於開發與維護 (二)
上一篇文章『 BEM 規範思維 – 讓 CSS 更利於開發與維護 (一) 』我們提及了 Block 與 Element 規則，接下來就繼續往下介紹！
Ｍodifier
定義 Block 或 Element 的外觀，狀態或行為的實體
特色：
- Ｍodifier name 描述了它的外觀（“什麼尺寸？”或“哪個主題？”等等 – size_s 或theme_islands ），它的狀態（“它與其他有什麼不同？” – disabled， focused 等）及其行為（“它如何表現？”或“它如何響應用戶？” – 例如directions_left-top）。
- Ｍodifier name 通過單個下劃線（_）與 Block name 或 Element name 分隔。
類型：
- Boolean
- 當 Ｍodifier 的存在與否會影響狀態，但又與它的值無關時我們使用 Boolean 類型的 Ｍodifier。例如：disabled。如果一個Boolean 類型的 Ｍodifier 是存在的，它的值則被假定為 true。
- Ｍodifier name 結構模式：
- block-name_modifier-name
- Block-name__element-name_modifier-name
<!-- `search-form` block 內有 `focused` Boolean modifier --> <form class="search-form search-form_focused"> <input class="search-form__input"> <!-- `button` element 內有 `disabled` Boolean modifier --> <button class="search-form__button search-form__button_disabled">Search</button> </form>
- Key-value
- 當 Ｍodifier 的值是重要關鍵。例如：“一個 islands 主題的按鈕”：menu_theme_islands。
- Ｍodifier name 結構模式：
- block-name_modifier-name_modifier-value
- block-name__element-name_modifier-name_modifier-value
<!-- `search-form` block 使用 `theme` modifier 的 value `islands` 修飾--> <form class="search-form search-form_theme_islands"> <input class="search-form__input"> <!-- `button` element 使用 `size` modifier 的 value `m` 修飾--> <button class="search-form__button search-form__button_size_m">Search</button> </form> <!-- 不能同時使用兩個具有不同值的相同 Ｍodifier --> <form class="search-form search-form_theme_islands search-form_theme_lite"> <input class="search-form__input"> <button class="search-form__button search-form__button_size_s search-form__button_size_m"> Search </button> </form>
從 BEM 的角度，Ｍodifier 不能脱離 Block 或 Element 使用。Ｍodifier 應該改變的是實體的外觀，行為或狀態，而不是替換它。
<!-- 正確。 `search-form` block 使用 `theme` modifier 的 value `islands` --> <form class="search-form search-form_theme_islands"> <input class="search-form__input"> <button class="search-form__button">Search</button> </form> <!-- 不正確。 `search-form` 遺失--> <form class="search-form_theme_islands"> <input class="search-form__input"> <button class="search-form__button">Search</button> </form>
Mix 混合模式
結合多個 BEM 實體的行為和樣式，無需複製程式碼，基於現有的 UI 組件上創建新的 UI組件。
<!-- `header` block --> <div class="header"> <!-- `search-form` block 混合在 `header` block 內的 `search-form` element --> <div class="search-form header__search-form"></div> </div>
在上述的範例中，我們結合 search-form （Block）和 header__search-form（Element）的行為和樣式。 這種方法允許我們在 header__search-form Element 中設置額外的形狀和定位，而 search-form 本身並無受到影響，因此我們還是可以在任何環境中使用該Block。 這就展現 BEM 的核心邏輯 – 獨立性與複用性。
在傳統命名方式中，我们經常使用嵌套的方式（.header .search-form）對局部樣式進行調整，但這樣做會改變選擇器的權重。而在 BEM 的思維，保持選擇器並列和低權重是必須遵守的準則。
文件架構
BEM 方法學中採用的組件方式也適用於文件架構中的項目。Block、Element 和 Modifier 為獨立的技術文件，代表我們也可單獨連接它們。
- 一個單獨的 Block 對應 一個單獨的目錄
- Block 與目錄具有相同的名稱 ex. `header` block 放置在 header/ 目錄中，`menu` block 放置在 menu/ 目錄中。
- 每個 Block 擁有各自的文件 ex. header.css 和 header.js
- Block 目錄是其 Element 和 Modifier 所在目錄的根目錄
- Element 目錄的名稱以雙下劃線（__）開始。ex. header/__logo/ 和 menu/__item
- Modifier 目錄的名稱以單下劃線（__）開始。ex. header/_fixed 和 menu/_theme_islands/
- Element 和 Modifier 的同樣各自擁有不同的文件。ex. header__input.js 和 header_theme_islands.css
search-form/ __input/ search-form__input.css search-form__input.js __button/ search-form__button.css search-form__button.js _theme/ search-form_theme_islands.css search-form block search-form_theme_lite.css search-form.css search-form.js
這樣的文件架構使複用程式碼變得容易許多。
我們不一定要遵循 BEM 建議的文件架構，也可以使用任何可替代的架構，只要根據 BEM 原則來組織我們的文件結構，以下有另外兩種架構方式供參考：
- Flat：https://en.bem.info/methodology/filestructure/#flat
- Flex：https://en.bem.info/methodology/filestructure/#flex
使用BEM思維可以幫助管理CSS開發與維護，讓前端開發更順暢，看更多電商架站相關內容，歡迎訂閱歐斯瑞電子報，以及追蹤我們的Facebook粉絲專頁！
延伸閱讀：
參考資料：
http://getbem.com/
https://en.bem.info/methodology/
我要留言