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

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

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

塊-元素-修飾符（BEM）

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

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

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

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

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

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

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

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

塊名稱(chēng)和元素名稱(chēng)通常用雙下劃線(xiàn)（.block__element）分隔。塊和元素名稱(chēng)通常用雙連字符與修飾符名稱(chēng)分隔（例如，.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是附加的類(lèi)名。它們不是search和search__label的替代品。類(lèi)名是BEM系統(tǒng)中使用的唯一選擇器類(lèi)型。可以使用子選擇器和后代選擇器，但后代也應(yīng)該是類(lèi)名。元素和ID選擇器是被禁止的。強(qiáng)制執(zhí)行塊和元素名稱(chēng)的唯一性還可以防止命名沖突，這在團(tuán)隊(duì)中可能會(huì)成為問(wèn)題。這種方法有幾個(gè)優(yōu)點(diǎn)：

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

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

原子CSS

如果說(shuō)BEM是行業(yè)寵兒，那么原子CSS就是它的叛逆者。雅虎的Thierry Koblentz在其2013年的文章“挑戰(zhàn)CSS最佳實(shí)踐”中命名并解釋了原子CSS，它使用一個(gè)緊湊的類(lèi)名庫(kù)。這些類(lèi)名通常是縮寫(xiě)的，并且與它們影響的內(nèi)容脫節(jié)。在原子CSS系統(tǒng)中，您可以知道類(lèi)名是什么作用——但是類(lèi)名（至少，樣式表中使用的類(lèi)名）和內(nèi)容類(lèi)型之間沒(méi)有關(guān)系。讓我們用一個(gè)例子來(lái)說(shuō)明。以下是我們?cè)谒^的傳統(tǒng)CSS架構(gòu)中可能稱(chēng)之為的一組規(guī)則。這些規(guī)則集使用描述其應(yīng)用內(nèi)容的類(lè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類(lèi)名都添加到元素的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è)聲明都成為它自己的類(lèi)：

.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?，F(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)記也更冗長(zhǎng)。但是當(dāng)我們創(chuàng)建警告消息組件時(shí)會(huì)發(fā)生什么？

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

兩個(gè)類(lèi)名發(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í)用程序類(lèi)，但達(dá)到了極致。具體來(lái)說(shuō)，它：

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

但是，原子CSS并非沒(méi)有爭(zhēng)議。

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

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

BEM與原子CSS

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

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

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

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

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

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

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

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

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

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

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

原子CSS提供了許多好處。它鼓勵(lì)可重用性，這可以大大減少您需要編寫(xiě)的CSS數(shù)量。它還提高了設(shè)計(jì)的一致性，因?yàn)橄嗤念?lèi)用于不同的組件。此外，原子CSS可以使您的樣式表更易于管理和理解，因?yàn)槊總€(gè)類(lèi)都有一個(gè)單一、明確定義的目的。

BEM如何處理CSS特異性問(wèn)題？

BEM通過(guò)鼓勵(lì)開(kāi)發(fā)人員使用類(lèi)選擇器而不是ID選擇器來(lái)幫助處理CSS特異性問(wèn)題。這導(dǎo)致整個(gè)項(xiàng)目中的特異性保持一致，因此在必要時(shí)更容易覆蓋樣式。此外，BEM的命名約定清楚地表明哪些元素是相關(guān)的，從而減少了意外樣式?jīng)_突的可能性。

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

是的，原子CSS適用于大型項(xiàng)目。它對(duì)可重用性和單一用途類(lèi)的關(guān)注可以幫助保持CSS的可管理性，即使項(xiàng)目不斷發(fā)展壯大。但是，它需要一種嚴(yán)謹(jǐn)?shù)姆椒▉?lái)確保類(lèi)保持一致和有意義。

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

BEM清晰而嚴(yán)格的命名約定使團(tuán)隊(duì)成員更容易理解CSS代碼，無(wú)論他們何時(shí)加入項(xiàng)目。這可以改善協(xié)作，因?yàn)殚_(kāi)發(fā)人員可以輕松理解和修改其他人編寫(xiě)的代碼。

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

原子CSS的一個(gè)潛在缺點(diǎn)是它可能導(dǎo)致HTML中出現(xiàn)大量類(lèi)。這可能使HTML更難閱讀和理解。此外，原子CSS需要一種嚴(yán)謹(jǐn)?shù)姆椒▉?lái)確保類(lèi)保持一致和有意義。

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

要開(kāi)始實(shí)現(xiàn)BEM，您需要將設(shè)計(jì)劃分為塊、元素和修飾符。然后，使用BEM的命名約定來(lái)命名您的CSS類(lèi)。這將在您的CSS和HTML之間創(chuàng)建清晰的關(guān)系，使您的代碼更易于閱讀和維護(hù)。

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

是的，BEM和原子CSS都可以與Sass或Less等CSS預(yù)處理器一起使用。這些預(yù)處理器可以使管理CSS更容易，并且它們與BEM和原子CSS的組織原則非常契合。

以上是CSS體系結(jié)構(gòu)：Block-Element-Modifier（BEM）和Atomic CSS的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！