【轉(zhuǎn)】《從WEUI看BEM的強大：組件化開發(fā)的命名藝術(shù)》

原文：https://juejin.cn/post/7509498122202382351?utm_source=gold_browser_extension

《從WEUI看BEM的強大：組件化開發(fā)的命名藝術(shù)》

??前言

打開微信的組件庫WEUI，查看源碼，你會發(fā)現(xiàn)，它的CSS的各個組件似乎在命名上遵循著一種規(guī)范，讓我們能夠清晰地了解各個組件是什么。這些規(guī)范就是我們今天要介紹的主角--BEM命名規(guī)范

實際上，BEM在大型項目、復(fù)雜前端架構(gòu)中非常流行，其實就有知名的Google、GitHub、Yandex等等公司和項目在廣泛使用。

那么BEM到底具體是怎么用的，以及它到底神奇在哪呢？讓我為你詳細介紹！

圖：WEUI的部分CSS源碼

??BEM核心概念

BEM 是一種前端 CSS 命名規(guī)范，旨在提高代碼的可讀性、可維護性和可擴展性，BEM的核心組成是塊（Block）、元素（Element）、修飾符（Modifier）三部分。

塊（Block）

塊是指獨立的功能模塊（如導(dǎo)航、表單、按鈕），是頁面的基本組成單元

塊的命名規(guī)則是：項目代號 - 區(qū)塊的作用或職責，用短橫線-連接

實例：weui-page(微信的頁面塊)、weui-btn（微信的按鈕塊）

塊的特性

樣式隔離：

通過weui作為項目代號，可以避免與其他庫沖突（如Bootstrap）。

塊的可復(fù)用性：

當我們按上述命名規(guī)則實現(xiàn)塊了之后，我們會發(fā)現(xiàn)只要定義好某一個塊的CSS樣式，很多地方都可以使用這個塊，共享CSS樣式了。

塊的封裝性：

我們通過weui-page包裹著里面的各式各樣的元素，其內(nèi)部樣式設(shè)置由塊自身控制，外部無需干預(yù)，例如下面代碼：

css 體驗AI代碼助手 代碼解讀復(fù)制代碼.weui-dialog {
  padding: 20px; /* 控制彈窗內(nèi)部整體間距 */
}

塊 .weui-dialog 的 padding 會影響其所有內(nèi)部元素（__hd、__bd），但不會泄漏到外部，外部無需知道塊的內(nèi)部實現(xiàn)細節(jié)，只需使用塊即可。

元素（Element）

元素是塊的組成部分，不能獨立存在（如按鈕的圖標，菜單的選項）

命名規(guī)范：元素用 塊名__元素名 來實現(xiàn)，用雙下劃線__連接。

實例：weui-page__title（頁面塊中的標題）,weui-btn__icon（按鈕塊中的圖標）

元素的特性

從屬于塊：

元素必須屬于某個塊，不能獨立存在，比如dialog__hd這種就不符合BEM規(guī)范，元素沒有在塊中，這樣做的目的是為了確保樣式作用域清晰，避免全局污染的問題

BEM的扁平結(jié)構(gòu)原則：

元素（Element）直接屬于塊（Block）或子塊（Sub-block），而不是其他元素。

錯誤代碼：

html 體驗AI代碼助手 代碼解讀復(fù)制代碼<!-- 違反BEM原則 -->
<div class="menu">
  <ul class="menu__list">
    <li class="menu__list__item">...</li> <!-- 錯誤：元素嵌套元素 -->
  </ul>
</div>

BEM原則是：元素應(yīng)是塊的直接子級，盡量避免元素嵌套其它元素。以下是推薦寫法

html 體驗AI代碼助手 代碼解讀復(fù)制代碼<div class="menu">
  <ul class="menu__list">
    <li class="menu__item">...</li> <!-- 直接屬于menu塊 -->
  </ul>
</div>

修飾符（Modifier）

修飾符用于定義塊或元素的不同狀態(tài)、樣式或變體，提供靈活的可擴展性。

命名規(guī)則：描述符的命名規(guī)則是塊/元素名 + 雙連字符 + 修飾符名：block--modifier 或 block__element--modifier，使用雙橫杠--連接。

案例：weui-tabbar__item--active（激活狀態(tài)）、weui-btn--loading（加載中的按鈕）

修飾符特性

可組合性

實際上，一個塊或者元素可以同時有多個修飾符。比如.weui-btn--primary.weui-btn--disabled

語義化命名

使用修飾符時，需要注意見名知義，特別是在團隊合作寫UI組件時，你的同事，看到你的修飾符的名字，就能夠了解該塊或者元素的狀態(tài)，能夠更好地協(xié)作開發(fā)！

???BEM的綜合實戰(zhàn)

下面給出一段代碼，詳細，準確應(yīng)用了BEM命名規(guī)范，大家可以進行參考

【遵循BEM的綜合應(yīng)用】（點擊展開）


html
 體驗AI代碼助手
 代碼解讀
復(fù)制代碼
    <body>
    <!-- 
      1. 整個頁面是一個大模塊（Block），類名"weui-page"表示"微信UI-頁面" 
      BEM規(guī)范：Block是獨立且有意義的組件
    -->
    <div class="weui-page">
        <!-- 
          2. 頁面頭部區(qū)域（Element），屬于weui-page的一部分
          BEM規(guī)范：Element用雙下劃線__連接，表示屬于某個Block
        -->
        <header class="weui-page__header">
            <!-- 3. 頁面標題（Element） -->
            <h1 class="weui-page__title">Button</h1>
            <!-- 4. 頁面描述（Element），desc是description的縮寫 -->
            <p class="weui-page__desc">按鈕</p>
        </header>
        
        <!-- 5. 頁面主體內(nèi)容區(qū)域（Element） -->
        <main class="weui-page__body">
            <!-- 
              6. 按鈕區(qū)域（新的Block），可以獨立存在和復(fù)用
              BEM規(guī)范：新的功能區(qū)塊應(yīng)該作為新的Block
            -->
            <div class="weui-button-area">
                <!-- 
                  7. 主要按鈕（Block + Modifier）
                  BEM規(guī)范：Modifier用雙橫杠--連接，表示狀態(tài)或變體
                -->
                <a href="#" class="weui-btn weui-btn--primary">主要操作</a>
                <!-- 8. 默認按鈕（Block + 不同Modifier） -->
                <a href="#" class="weui-btn weui-btn--default">次要操作</a>
            </div>
            
            <!-- 9. 單元格列表（新的Block） -->
            <div class="weui-cells">
                <!-- 10. 列表標題（Element） -->
                <h3 class="weui-cells__title">個人信息</h3>
                
                <!-- 11. 單個單元格（Block） -->
                <div class="weui-cell">
                    <!-- 12. 單元格頭部（Element） -->
                    <div class="weui-cell__hd">
                        <!-- 13. 單元格圖片（Element） -->
                        <img src="" alt="" class="weui-cell__img">
                    </div>
                    <!-- 14. 單元格主體內(nèi)容（Element） -->
                    <div class="weui-cell__bd">
                        <!-- 15. 單元格文本（Element） -->
                        <p class="weui-cell__text">標題文字</p>
                    </div>
                    <!-- 16. 單元格尾部（Element） -->
                    <div class="weui-cell__ft">
                        <!-- 17. 單元格描述文字（Element） -->
                        <span class="weui-cell__desc">說明文字</span>
                    </div>
                </div>
            </div>
            
            <!-- 18. 表單區(qū)域（新的Block） -->
            <div class="weui-form">
                <!-- 19. 表單頭部（Element） -->
                <div class="weui-form__hd"></div>
                <!-- 20. 表單主體（Element） -->
                <div class="weui-form__bd"></div>
                <!-- 21. 表單尾部（Element） -->
                <div class="weui-form__ft"></div>
            </div>
        </main>
    </div>
</body>

??BEM的應(yīng)用

在前面，我們已經(jīng)掌握了BEM的核心概念以及命名規(guī)范不僅是一種 CSS 命名規(guī)范，更是一種前端架構(gòu)思維，適用于各種復(fù)雜項目。以下是 BEM 在實際開發(fā)中的典型應(yīng)用場景和最佳實踐。

組件化開發(fā)（React/Vue/Angular）

BEM 天然適合組件化開發(fā)，每個組件對應(yīng)一個 Block，內(nèi)部元素使用 Element，不同狀態(tài)用 Modifier。

大型項目（團隊協(xié)作）

BEM 的嚴格命名規(guī)則能有效避免樣式?jīng)_突，適合多人協(xié)作開發(fā)。

UI 庫設(shè)計（如 WEUI、Bootstrap）

BEM 被廣泛用于 UI 框架，確保樣式隔離和可擴展性

響應(yīng)式設(shè)計與主題切換

BEM 的修飾符可以輕松實現(xiàn)不同屏幕尺寸或主題的樣式切換。

??總結(jié)

有了BEM命名規(guī)范，能讓我們的代碼變得更加健壯，主要體現(xiàn)在：

清晰的代碼結(jié)構(gòu)：通過 Block__Element--Modifier 的命名規(guī)則，讓 HTML/CSS 更易讀。
樣式隔離：避免全局污染，減少命名沖突。
可維護性：修改組件時不會影響其他部分。
團隊協(xié)作友好：統(tǒng)一規(guī)范，降低溝通成本。

下面是BEM命名規(guī)范的總結(jié)

類型	格式	示例
Block	`.block`	`.header`, `.modal`
Element	`.block__element`	`.menu__item`, `.card__title`
Modifier	`.block--modifier` 或 `.block__element--modifier`	`.button--disabled`, `.tab__item--active`

如果項目簡單，確實可以選擇更輕量級的方案，但對于復(fù)雜的前端項目，BEM仍然是經(jīng)過驗證的可靠選擇。

??結(jié)尾

感謝你看到最后，最后再說兩點~
①如果你持有不同的看法，歡迎你在文章下方進行留言、評論。
②如果對你有幫助，或者你認可的話，歡迎給個小點贊，支持一下~
我是3Katrina，一個熱愛編程的大三學生

（文章內(nèi)容僅供學習參考，如有侵權(quán)，非常抱歉，請立即聯(lián)系作者刪除。）

作者：3Katrina
鏈接：https://juejin.cn/post/7509498122202382351
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

posted @ 2025-05-30 08:50 tc310 閱讀(29) 評論(0) 收藏舉報

刷新頁面返回頂部

tc310