BEM是CSS命名約定，通過(guò)在塊，元素和修飾符周?chē)鷺?gòu)造類(lèi)名稱(chēng)來(lái)提高可擴(kuò)展性和可維護(hù)性。 1）塊是獨(dú)立組件。 2）元素是特定於塊的兒童。 3）修飾符表示變化。班級(jí)名稱(chēng)遵循.block__Element-模型模式。避免深入嵌套元素，將元素重複使用元素或鏈修飾符。 BEM是大型項(xiàng)目的理想選擇，但對(duì)於較小的項(xiàng)目或使用範(fàn)圍的CSS解決方案可能是不需要的。

當(dāng)您處理大型網(wǎng)站或應(yīng)用程序時(shí)，保持CSS的井井有條可能會(huì)變得凌亂。這就是BEM進(jìn)入的地方 - 這是一項(xiàng)命名慣例，可幫助您編寫(xiě)可擴(kuò)展和可維護(hù)的CSS，尤其是在團(tuán)隊(duì)或長(zhǎng)期項(xiàng)目工作時(shí)。

BEM的核心思想是將UI分為獨(dú)立的塊，每個(gè)塊都有其自身的元素和可能的變化（修飾符）。它使您的代碼更容易預(yù)測(cè)，並且更易於調(diào)試。

讓我們分解如何在現(xiàn)實(shí)生活中實(shí)際使用BEM。

BEM到底是什麼？

BEM代表塊元素修飾符。這不是框架或工具，而是一種命名CSS類(lèi)的方法，因此您（和其他人）可以通過(guò)查看其類(lèi)名來(lái)理解HTML元素之間的關(guān)係。

這是每個(gè)部分的含義：

• 塊：可以在任何地方重複使用的獨(dú)立組件。想想按鈕，菜單或卡片之類(lèi)的東西。
• 元素：無(wú)法在其之外使用的塊的一部分。例如，菜單塊中的菜單項(xiàng)。
• 修飾符：用於指示塊或元素的不同狀態(tài)或變化的標(biāo)誌。就像“禁用”按鈕或“黑暗”主題變化。

因此，典型的BEM類(lèi)看起來(lái)像這樣： .block__element--modifier 。

起初可能會(huì)感覺(jué)到冗長(zhǎng)，但是一旦您開(kāi)始縮放，冗長(zhǎng)就變得清晰了。

如何用BEM構(gòu)造CSS

首先識(shí)別UI中的塊。這些應(yīng)該是獨(dú)立的組成部分。一旦獲得了一個(gè)塊，任何依賴(lài)塊的子元素都應(yīng)使用雙下劃線（ __ ）命名。

例如，如果您有一個(gè)稱(chēng)為nav-bar的導(dǎo)航欄塊，則其中一個(gè)單獨(dú)的鏈接將是nav-bar__link 。如果您想設(shè)計(jì)該鏈接的特殊版本（也許是一個(gè)突出顯示的鏈接），則將使用諸如nav-bar__link--active 。

一些實(shí)用技巧：

• 避免深築巢。當(dāng)您保持結(jié)構(gòu)平坦時(shí)，BEM效果最好。
• 不要連鎖修飾符。每個(gè)班級(jí)名稱(chēng)僅使用一個(gè)--modifier 。
• 保持塊名稱(chēng)簡(jiǎn)短但描述性。 user-card比ucrd更好。
• 堅(jiān)持小寫(xiě)和連字符，以獲得可讀性。

這種結(jié)構(gòu)使您可以輕鬆搜索您的樣式表並了解它們影響的UI的哪些部分。

使用BEM時(shí)避免的常見(jiàn)錯(cuò)誤

即使是經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，有時(shí)也沒(méi)有意識(shí)到BEM。這是一些常見(jiàn)的陷阱：

• 在其塊上下文之外使用元素
  元素屬於特定塊。如果您在其他地方重用.block__element ，則可能不應(yīng)該是一個(gè)元素 - 考慮使其成為單獨(dú)的塊。

• 築巢元素太深
  類(lèi)似.block__element__sub-element打破了BEM概念。相反，將塊下的子元素組成相同級(jí)別的一部分或創(chuàng)建一個(gè)新塊。

• 錯(cuò)誤地使用修飾符
  修飾符只能改變外觀或行為。不要使用它們來(lái)表示不同的塊。如果看起來(lái)完全不同，那不是一個(gè)變化 - 這是一個(gè)新塊。

• 將BEM與實(shí)用程序混合
  如果您使用的是公用設(shè)施優(yōu)先的方法（例如尾風(fēng)），則BEM可能不太合適。選擇一種策略並堅(jiān)持下去以保持一致性。

正確地練習(xí)了bem，但是儘早避免這些錯(cuò)誤將使您稍後免於混亂。

當(dāng)不使用bem

儘管BEM非常適合大型項(xiàng)目，但對(duì)於較小的站點(diǎn)或原型來(lái)說(shuō)，它可能過(guò)於殺傷。如果您要構(gòu)建一頁(yè)站點(diǎn)或小型著陸頁(yè)，則更簡(jiǎn)單的命名約定（例如SMACSS甚至沒(méi)有嚴(yán)格的系統(tǒng)）可能會(huì)很好。

另外，如果您在VUE等框架或與模塊或scoped樣式中使用CSS-In-JS庫(kù)或範(fàn)圍的樣式，則某些BEM原理可能不會(huì)直接適用。

在這種情況下，BEM的主要好處（避免命名衝突）已經(jīng)由工具處理，因此您可以簡(jiǎn)化命名。

基本上，BEM為您提供了編寫(xiě)可擴(kuò)展CSS的清晰結(jié)構(gòu)。它沒(méi)有執(zhí)行任何造型規(guī)則，只是命名規(guī)則，這足以在可維護(hù)性上產(chǎn)生很大的影響。

以上是BEM編寫(xiě)可擴(kuò)展CSS教程的方法的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！