什麼是 BEM（塊、元素、修飾符）以及它如何與 Drupal Emulsify Twig 一起使用

已發表: 2022-11-08

在使用開源技術和軟件時，更重要的是簡化閱讀和理解代碼所需的工作。一個好的命名約定可以幫助您解決更大的問題，而不是在代碼審查期間專注於語法和样式偏好。經驗豐富的開發人員在處理具有大量樣式元素的大型網站時，了解編寫良好且組織良好的代碼的重要性。

BEM（塊、元素、修飾符）方法是一種廣泛使用的 CSS 類命名約定，由於它提供的易用性而越來越受歡迎。 BEM 的基本概念是基於組件的 Web 開發。 BEM 使界面開髮變得簡單快捷，尤其是在您處理具有復雜 UI 的大型項目時。讓我們進一步探索 BEM 以及它如何與 Drupal Emulsify Twig 模塊一起工作。

什麼是 BEM

引入 BEM 方法有助於使 CSS 類更易於訪問、理解和擴展。它可以加速開發過程並幫助構建可重用的組件。

BEM包括三個部分：

堵塞
元素
修飾符

堵塞

塊是最外層且功能獨立的組件，可重用。示例：頁眉、頁腳、側邊欄、菜單、內容等。

特徵：

塊名稱應始終反映塊的用途。
塊不應使用邊距或位置。如果您需要添加邊距或位置，則需要將其應用於內部容器。
使用 BEM 時不要使用 CSS 標籤或 ID 選擇器。

例子：

 <div class=”icon-button”></div>

元素

元素是塊的子項。每個元素只能有一個塊，不能在它之外使用。示例：菜單項、列表項、輸入字段等。

特徵：

元素名稱（類）應描述其用途（標題、標題）而不是其狀態（小/紅色）。
元素和塊用雙下劃線 (__) 分隔。像這樣：塊名稱__元素名稱。

例子：

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

修飾符

一個類名，您可以通過它定義塊或元素的外觀、狀態或行為。示例：紅色、大、禁用、固定等。

特徵：

修飾符名稱描述了它的外觀。例如，如果外觀是“_large”，那麼修飾符類將是icon-button__title_large 。
修飾符通過單個下劃線 (_) 與塊或元素分隔。

例子：

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

修飾符的類型

1. 布爾值

您可以檢查布爾值的條件並將其設置在變量中。此變量可以作為修飾符值傳遞。

2.鍵值對

帶有鍵值的修飾符全名的結構將遵循以下模式之一：

塊名稱修飾符名稱修飾符值
塊名稱__元素名稱修飾符名稱修飾符值

命名約定：規則和方案

有不同的命名方案。所有方案都有一些共同的規則，例如：

名稱以小寫拉丁字母書寫。
單詞用連字符 (-) 分隔。

1. 經典命名方案

經典命名方案是 BEM 的默認命名方案。

塊名稱__elem-name_mod-name_mod-val

元素名稱和塊名稱用雙下劃線 (__) 分隔。
修飾符名稱和塊或元素名稱由單個下劃線 (_) 分隔。
修飾符值和修飾符名稱由單個下劃線 (_) 分隔。

2. 兩個破折號的命名方式

塊名__elem-name--mod-name--mod-val

元素和塊名稱由雙下劃線 (__) 分隔。
塊和元素由雙連字符 (--) 分隔。
修飾符和修飾符的值用雙連字符 (--) 分隔。

3. CamelCase 命名風格

blockName-elemName_modName_modVal

第一個單詞之後的每個單詞都以大寫字母開頭。
塊、元素和修飾符的使用方式與標準命名方案中的相同。

4. React 命名風格

BlockName-ElemName_modName_modVal

塊的名稱和元素的名稱以大寫字母開頭。
修飾符的名稱以小寫字母開頭。
元素名稱和塊名稱由單個連字符 (-) 分隔。
修飾符的名稱和值的分隔方式與標準方案中的相同。

Drupal 中的 BEM 與 Emulsify Twig 模塊

在 Drupal 中，我們可以藉助 Emulsify Twig 模塊使用 BEM Twig 函數。 BEM 函數允許您在組件中的元素上創建 BEM 類。下面提到的是一些 BEM Twig 擴展及其用法。

1. 簡單區塊名稱（必填）：

這將創建：

2. 使用修飾符阻止：

如果要添加多個修飾符，可以使用數組來完成。

這將創建：

3. 帶有修飾符和塊名的元素（可選）：

這將創建：

4. 帶有塊名但沒有修飾符的元素（可選）：

這將創建：

5. 帶有塊名、修飾符和額外類的元素：

這將創建：

6. 僅具有額外類的元素（可選）：

這將創建：

添加屬性 Twig 擴展

添加屬性 Twig 功能允許您向組件的元素添加 HTML 屬性。看看下面的一些添加屬性函數：

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

最後的想法

BEM 方法對於想要編寫和維護質量更好、易於交付和理解的代碼的開發人員非常有用。每個元素都有一個用途，可以很容易地通過它的名稱和它來自哪個塊來識別。如果使用得當，您會發現使用 BEM 可以提高開發速度。如果您喜歡您閱讀的內容，請註冊我們的每週通訊，我們將在您的收件箱中向您發送新鮮的、炙手可熱的見解！