文章彙整

BEM 規範思維 – 讓 CSS 更利於開發與維護 (二)

By Steffi 2 months agoNo Comments
首頁  /  網站設計與開發  /  BEM 規範思維 – 讓 CSS 更利於開發與維護 (二)

上一篇文章『 BEM 規範思維 – 讓 CSS 更利於開發與維護 (一) 』我們提及了 Block 與 Element 規則,接下來就繼續往下介紹!

 

odifier

使用BEM做CSS開發與維護 02 01

https://en.bem.info/methodology/key-concepts/

 

定義 Block 或 Element 的外觀,狀態或行為的實體

 

特色:

  • Modifier name 描述了它的外觀(“什麼尺寸?”或“哪個主題?”等等 – size_s 或theme_islands ),它的狀態(“它與其他有什麼不同?” – disabled, focused 等)及其行為(“它如何表現?”或“它如何響應用戶?” – 例如directions_left-top)。
  • Modifier name 通過單個下劃線(_)與 Block name 或  Element name 分隔。

類型:

  • Boolean
  1. 當 Modifier 的存在與否會影響狀態,但又與它的值無關時我們使用 Boolean 類型的 Modifier。例如:disabled。如果一個Boolean 類型的 Modifier 是存在的,它的值則被假定為 true。
  2. Modifier 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
  1. 當 Modifier 的值是重要關鍵。例如:“一個 islands 主題的按鈕”:menu_theme_islands。
  2. Modifier 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>

<!-- 不能同時使用兩個具有不同值的相同 Modifier -->
<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 的角度,Modifier 不能脱離 Block 或 Element 使用。Modifier 應該改變的是實體的外觀,行為或狀態,而不是替換它。

<!--
   正確。 `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.cssheader.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 原則來組織我們的文件結構,以下有另外兩種架構方式供參考:

 

使用BEM思維可以幫助管理CSS開發與維護,讓前端開發更順暢,看更多電商架站相關內容,歡迎訂閱歐斯瑞電子報,以及追蹤我們的Facebook粉絲專頁

 

延伸閱讀:

8個免費工具幫助簡化前端開發的工作

 

參考資料:
http://getbem.com/

https://en.bem.info/methodology/

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。