爱情岛论坛首页永久入口,丰满多毛的大隂户视频,藏春阁福利视频

塊-元素-修飾符（BEM）

原子CSS

反對(duì)原子CSS的論點(diǎn)

BEM與原子CSS

了解何時(shí)走自己的路

關(guān)於CSS架構(gòu)的常見問題解答：BEM和原子CSS

BEM和原子CSS的主要區(qū)別是什麼？

BEM如何提高CSS的可擴(kuò)展性？

我可以同時(shí)使用BEM和原子CSS嗎？

使用原子CSS的好處是什麼？

BEM如何處理CSS特異性問題？

原子CSS適用於大型項(xiàng)目嗎？

BEM如何在團(tuán)隊(duì)協(xié)作中提供幫助？

使用原子CSS的潛在缺點(diǎn)是什麼？

如何在我的項(xiàng)目中開始實(shí)現(xiàn)BEM？

我可以將BEM或原子CSS與Sass或Less等CSS預(yù)處理器一起使用嗎？

首頁

web前端

css教學(xué)

CSS體系結(jié)構(gòu)：Block-Element-Modifier（BEM）和Atomic CSS

Jack chen

Feb 10, 2025 am 10:55 AM

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

本文節(jié)選自Tiffany新書《CSS大師，第二版》。我們將探討兩種CSS命名方法論。這兩種方法都是為了改進(jìn)大型網(wǎng)站和大型團(tuán)隊(duì)的開發(fā)流程而創(chuàng)建的；然而，它們同樣適用於單人團(tuán)隊(duì)。您可以選擇其中一種、兩種都不選，或者混合使用，這取決於您自己。介紹它們的目的是幫助您思考編寫自己的CSS的方法。

關(guān)鍵要點(diǎn)

BEM（塊-元素-修飾符）是一種CSS方法論，它鼓勵(lì)開發(fā)人員將網(wǎng)站視為可重用組件塊的集合。它提供了一個(gè)清晰的命名系統(tǒng)，使理解網(wǎng)站不同部分之間的關(guān)係更容易，對(duì)於大型開發(fā)團(tuán)隊(duì)尤其有利。
相反，原子CSS專注於創(chuàng)建高度細(xì)粒度、可重用的樣式，而不是為每個(gè)組件創(chuàng)建規(guī)則集。它減少了特異性衝突，並允許快速HTML組件開發(fā)。但是，它更適合小型團(tuán)隊(duì)或單個(gè)開發(fā)人員。
BEM和原子CSS可以一起使用，將BEM的結(jié)構(gòu)與原子CSS的可重用性結(jié)合起來。這可以產(chǎn)生一個(gè)高度組織化和易於維護(hù)的CSS代碼庫。
儘管它們有好處，但在開發(fā)人員無法完全控制標(biāo)記（例如使用CMS）的情況下，BEM和原子CSS可能都沒有用。在這種情況下，開發(fā)人員可能需要使用冗長且特定的選擇器來實(shí)現(xiàn)其目標(biāo)。

塊-元素-修飾符（BEM）

BEM，或塊-元素-修飾符，是一種方法論、命名系統(tǒng)和一套相關(guān)的工具。 BEM誕生於Yandex，旨在由大型開發(fā)團(tuán)隊(duì)進(jìn)行快速開發(fā)。在本節(jié)中，我們將重點(diǎn)關(guān)注概念和命名系統(tǒng)。 BEM方法論鼓勵(lì)設(shè)計(jì)師和開發(fā)人員將網(wǎng)站視為可重用組件塊的集合，這些塊可以混合和匹配以創(chuàng)建界面。塊只是文檔的一部分，例如標(biāo)題、頁腳或側(cè)邊欄，如下圖所示。也許令人困惑的是，“塊”在這裡指的是構(gòu)成頁面或應(yīng)用程序的HTML片段。

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

塊可以包含其他塊。例如，標(biāo)題塊可能還包含徽標(biāo)、導(dǎo)航和搜索表單塊，如下所示。頁腳塊可能包含站點(diǎn)地圖塊。

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

比塊更細(xì)粒度的是元素。正如BEM文檔所解釋的：

元素是執(zhí)行特定功能的塊的一部分。元素依賴於上下文：它們只有在其所屬的塊的上下文中才有意義。

例如，搜索表單塊包含文本輸入元素和提交按鈕元素，如下圖所示。（為了明確起見，我們使用的是設(shè)計(jì)元素意義上的“元素”，而不是HTML元素意義上的“元素”。）

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

另一方面，主要內(nèi)容塊可能具有文章列表塊。此文章列表塊可能包含一系列文章推廣塊。每個(gè)文章推廣塊可能包含圖像、摘錄和“閱讀更多”元素，如下所示。

CSS Architecture: Block-Element-Modifier (BEM) & Atomic CSS

塊和元素共同構(gòu)成了BEM命名約定的基礎(chǔ)。根據(jù)BEM規(guī)則：

塊名稱在一個(gè)項(xiàng)目中必須唯一
元素名稱在一個(gè)塊中必須唯一
塊的變體——例如，具有深色背景的搜索框——應(yīng)該在類名中添加修飾符

塊名稱和元素名稱通常用雙下劃線（.block__element）分隔。塊和元素名稱通常用雙連字符與修飾符名稱分隔（例如，.block--modifier或.block__element--modifier）。以下是使用搜索表單示例的BEM外觀：

<div class="search">
  <label for="s" class="search__label">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit">Search</button>
</div>

具有深色背景的此表單的變體可能使用以下標(biāo)記：

<div class="search search--inverse">
  <label for="s" class="search__label search__label--inverse">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit search__submit--inverse">Search</button>
</div>

我們的CSS可能如下所示：

.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}

在我們的標(biāo)記和CSS中，search--inverse和search__label--inverse是附加的類名。它們不是search和search__label的替代品。類名是BEM系統(tǒng)中使用的唯一選擇器類型?？梢允褂米舆x擇器和後代選擇器，但後代也應(yīng)該是類名。元素和ID選擇器是被禁止的。強(qiáng)制執(zhí)行塊和元素名稱的唯一性還可以防止命名衝突，這在團(tuán)隊(duì)中可能會(huì)成為問題。這種方法有幾個(gè)優(yōu)點(diǎn)：

新團(tuán)隊(duì)成員很容易閱讀標(biāo)記和CSS，並理解其行為
添加更多開發(fā)人員可以提高團(tuán)隊(duì)生產(chǎn)力
一致的命名減少了類名衝突和副作用的可能性
CSS獨(dú)立於標(biāo)記
CSS高度可重用

BEM的內(nèi)容遠(yuǎn)不止本章節(jié)中的一節(jié)所能容納的。 BEM網(wǎng)站更詳細(xì)地描述了這種方法，並且還提供了工具和教程來幫助您入門。要了解有關(guān)BEM命名約定方面的更多信息，另一個(gè)極好的資源是Get BEM。

原子CSS

如果說BEM是行業(yè)寵兒，那麼原子CSS就是它的叛逆者。雅虎的Thierry Koblentz在其2013年的文章“挑戰(zhàn)CSS最佳實(shí)踐”中命名並解釋了原子CSS，它使用一個(gè)緊湊的類名庫。這些類名通常是縮寫的，並且與它們影響的內(nèi)容脫節(jié)。在原子CSS系統(tǒng)中，您可以知道類名是什麼作用——但是類名（至少，樣式表中使用的類名）和內(nèi)容類型之間沒有關(guān)係。讓我們用一個(gè)例子來說明。以下是我們在所謂的傳統(tǒng)CSS架構(gòu)中可能稱之為的一組規(guī)則。這些規(guī)則集使用描述其應(yīng)用內(nèi)容的類名——全局消息框，以及“成功”、“警告”和“錯(cuò)誤”消息框的樣式：

<div class="search">
  <label for="s" class="search__label">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit">Search</button>
</div>

要?jiǎng)?chuàng)建錯(cuò)誤消息框，我們需要將msg和msg-error類名都添加到元素的class屬性：

<div class="search search--inverse">
  <label for="s" class="search__label search__label--inverse">Search for: </label>
  <input type="text" id="s" class="search__input">
  <button class="search__submit search__submit--inverse">Search</button>
</div>

讓我們將其與原子系統(tǒng)進(jìn)行對(duì)比，在原子系統(tǒng)中，每個(gè)聲明都成為它自己的類：

.search {
    color: #333;
}
.search--inverse {
    color: #fff;
    background: #333;
}
.search__submit {
    background: #333;
    border: 0;
    color: #fff;
    height: 2rem;
    display: inline-block;
}
.search__submit--inverse {
    color: #333;
    background: #ccc;
}

這是更多的CSS。現(xiàn)在讓我們重新創(chuàng)建我們的錯(cuò)誤消息組件。使用原子CSS，我們的標(biāo)記變?yōu)椋?/p>

.msg {
    background-color: #a6d5fa;
    border: 2px solid #2196f3;
    border-radius: 10px;
    font-family: sans-serif;
    padding: 10px;
}
.msg-success {
    background-color: #aedbaf;
    border: 2px solid #4caf50;
}
.msg-warning {
    background-color: #ffe8a5;
    border-color:  #ffc107;
}
.msg-error {
    background-color: #faaaa4;
    border-color: #f44336;
}

我們的標(biāo)記也更冗長。但是當(dāng)我們創(chuàng)建警告消息組件時(shí)會(huì)發(fā)生什麼？

<p class="msg msg-error">An error occurred.</p>

兩個(gè)類名發(fā)生了變化：bg-d和bc-d被bg-c和bc-c替換。我們重用了五個(gè)規(guī)則集?，F(xiàn)在，讓我們創(chuàng)建一個(gè)按鈕：

.bg-a {
    background-color: #a6d5fa;
}
.bg-b {
    background-color: #aedbaf;
}
.bg-c {
    background-color: #ffe8a5;
}
.bg-d {
    background-color: #faaaa4;
}
.bc-a{
    border-color: #2196f3;
}
.bc-b {
    border-color: #4caf50;
}
.bc-c {
    border-color:  #ffc107;
}
.bc-d {
    border-color:  #f44336;
}
.br-1x {
    border-radius: 10px;
}
.bw-2x {
    border-width: 2px;
}
.bss {
    border-style: solid;
}
.sans {
    font-style: sans-serif;
}
.p-1x {
    padding: 10px;
}

嘿！在這裡，我們重用了四個(gè)規(guī)則集，並且避免向我們的樣式表中添加更多規(guī)則。在一個(gè)強(qiáng)大的原子CSS架構(gòu)中，添加新的HTML組件（例如文章側(cè)邊欄）不需要添加更多CSS（儘管實(shí)際上，它可能需要添加更多內(nèi)容）。原子CSS有點(diǎn)像在CSS中使用實(shí)用程序類，但達(dá)到了極致。具體來說，它：

通過創(chuàng)建高度細(xì)粒度、高度可重用的樣式來保持CSS簡潔，而不是為每個(gè)組件創(chuàng)建規(guī)則集
通過使用低特異性選擇器系統(tǒng)來大大減少特異性衝突
一旦定義了初始規(guī)則集，就可以進(jìn)行快速的HTML組件開發(fā)

但是，原子CSS並非沒有爭議。

反對(duì)原子CSS的論點(diǎn)

原子CSS與我們學(xué)習(xí)的幾乎所有關(guān)於編寫CSS的內(nèi)容都背道而馳。它感覺幾乎和到處粘貼樣式屬性一樣糟糕。事實(shí)上，對(duì)原子CSS方法論的主要批評(píng)之一是它模糊了內(nèi)容和演示之間的界限。如果將元素浮動(dòng)到左側(cè)並添加十像素的邊距，當(dāng)我們不再希望該元素浮動(dòng)到左側(cè)時(shí)該怎麼辦？當(dāng)然，一個(gè)答案是將fl類從我們的元素中刪除。但是現(xiàn)在我們正在更改HTML。使用CSS的全部原因是為了使標(biāo)記不受演示的影響，反之亦然。（我們也可以通過從樣式表中刪除.fl {float: left;}規(guī)則來解決此問題，儘管這會(huì)影響每個(gè)類名為fl的元素。）儘管如此，更新HTML可能是為了獲得更簡潔的CSS而付出的少量代價(jià)。在Koblentz的原始文章中，他使用了諸如.M-10（margin: 10px）和.P-10（padding: 10px）之類的類名。這種命名約定的問題應(yīng)該很明顯。更改為五像素或20像素的邊距意味著我們需要更新我們的CSS和HTML，否則可能會(huì)導(dǎo)致類名無法準(zhǔn)確描述其效果。使用諸如p-1x之類的類名，如本節(jié)所述，解決了這個(gè)問題。類名中的1x部分錶示比率，而不是定義的像素?cái)?shù)。如果基本填充是五像素（即，.p-1x { padding: 5px; }），則.p-2x將設(shè)置十像素的填充。是的，這不太能描述類名所做的工作，但這同時(shí)也意味著我們可以更改CSS而無需更新HTML，並且不會(huì)創(chuàng)建誤導(dǎo)性的類名。原子CSS架構(gòu)不會(huì)阻止我們使用描述內(nèi)容的類名在我們的標(biāo)記中。您仍然可以向代碼中添加.button-close或.accordion-trigger。對(duì)於JavaScript和DOM操作，此類類名實(shí)際上更可取。

BEM與原子CSS

當(dāng)您有大量開發(fā)人員並行構(gòu)建CSS和HTML模塊時(shí)，BEM效果最佳。它有助於防止大型團(tuán)隊(duì)創(chuàng)建的錯(cuò)誤和bug。它可以很好地?cái)U(kuò)展，部分原因是命名約定具有描述性和可預(yù)測性。 BEM不僅僅適用於大型團(tuán)隊(duì)，但它非常適合大型團(tuán)隊(duì)。當(dāng)有一個(gè)小型團(tuán)隊(duì)或一名工程師負(fù)責(zé)開發(fā)一組CSS規(guī)則，並由一個(gè)更大的團(tuán)隊(duì)構(gòu)建完整的HTML組件時(shí)，原子CSS效果更好。使用原子CSS，開發(fā)人員只需查看樣式指南——或CSS源代碼——即可確定特定模塊所需的類名集。

了解何時(shí)走自己的路

在實(shí)踐中，您的CSS可能包含多種方法的混合。除了影響佈局的實(shí)用程序類名之外，您可能還有一些描述內(nèi)容或組件的類名。如果您無法完全控制標(biāo)記（例如使用CMS），那麼這兩種方法都可能沒有用。您甚至可能需要使用冗長且特定的選擇器來實(shí)現(xiàn)您想要的目標(biāo)。

關(guān)於CSS架構(gòu)的常見問題解答：BEM和原子CSS

BEM和原子CSS的主要區(qū)別是什麼？

BEM（塊、元素、修飾符）和原子CSS都是組織和構(gòu)建CSS代碼的方法論。 BEM專注於一種命名約定，使CSS更容易閱讀和理解。它將設(shè)計(jì)劃分為塊、元素和修飾符，以在CSS和HTML之間創(chuàng)建清晰、嚴(yán)格的關(guān)係。另一方面，原子CSS是關(guān)於編寫反映視覺功能的小型、單一用途的CSS類。它鼓勵(lì)可重用性並旨在減少代碼量。

BEM如何提高CSS的可擴(kuò)展性？

BEM通過在CSS和HTML之間提供清晰而嚴(yán)格的關(guān)係來提高CSS的可擴(kuò)展性。它使用特定的命名約定，使理解不同元素之間的關(guān)係更容易。這使得代碼更易於維護(hù)和擴(kuò)展，因?yàn)楦菀滋砑有鹿δ芑蛐薷默F(xiàn)有功能而不會(huì)破壞任何東西。

我可以同時(shí)使用BEM和原子CSS嗎？

是的，可以同時(shí)使用BEM和原子CSS。一些開發(fā)人員發(fā)現(xiàn)，結(jié)合這兩種方法可以獲得兩全其美的好處。 BEM的嚴(yán)格命名約定可用於構(gòu)建CSS，而原子CSS的單一用途類可用於設(shè)置單個(gè)元素的樣式。這種組合可以產(chǎn)生高度組織化和易於維護(hù)的CSS代碼庫。