本文是與SiteGround合作創(chuàng)作系列文章的一部分。感謝您支持使SitePoint成為可能的合作伙伴。

本文將探討三種成功的CSS架構方法，包括其原則、目標和優(yōu)勢。

關鍵要點

• BEM、SMACSS和ECSS是三種用于管理CSS架構的方法，每種方法都有其自身的原則、目標和優(yōu)勢。
• BEM（塊-元素-修飾符）專注于長期易于維護項目和組件的可重用性，使用智能命名約定將CSS代碼組織成可重用的模塊。
• SMACSS（可擴展和模塊化CSS架構）對CSS規(guī)則進行分類，以識別模式并創(chuàng)建用于編寫可維護和可重用CSS的指南，其靈活的命名約定有助于代碼組織和團隊效率。
• ECSS（持久性CSS）強調隔離，將構建每個組件所需的所有代碼封裝在其自己的共享文件夾中，并使用嚴格的CSS命名約定。從長遠來看，這種方法支持輕松維護和最小化文件大小的增加。

為什么CSS代碼會失控？

保持CSS代碼精簡、可重用和可維護非常困難。如果您未能以一致的方式執(zhí)行任何編碼和組織規(guī)則，小型、中型和大型項目都可能出現這種情況，尤其是在有多個開發(fā)人員參與的項目中。當代碼庫很大，隨著時間的推移經歷了許多更改，并且缺乏組織時，團隊通常更傾向于在樣式表文檔的末尾添加新的樣式規(guī)則，而不是刪除部分代碼或修改現有代碼。主要原因通常是編輯或刪除CSS聲明的效果是不可預測的，并且可能導致項目中的某個地方設計中斷。這是一個失敗的策略，它會導致代碼重復、優(yōu)先級問題（覆蓋樣式規(guī)則變成一場戰(zhàn)斗）以及整體膨脹。通常情況下，選擇最適合您需求的方法是一個迭代過程，它從熟悉現有方法開始。以下三種方法可以幫助您應對雜亂樣式表帶來的挑戰(zhàn)。

BEM

BEM代表塊-元素-修飾符。它是Yandex創(chuàng)建的一種用于構建CSS的架構方法。BEM方法的目標是>開發(fā)快速啟動并長期支持的網站。它有助于創(chuàng)建可擴展和可重用的界面組件。BEM網站

這里的關鍵概念是長期易于維護項目和組件的可重用性。BEM的核心策略是借助智能命名約定將CSS代碼組織成可重用的模塊。讓我們仔細看看。

什么是塊？

識別塊是應用BEM方法的關鍵步驟。塊是一個>功能獨立的頁面組件，可以重復使用。在HTML中，塊由class屬性表示。BEM文檔。

在決定將什么視為塊時，問問自己是否可以輕松刪除該部分代碼并在其他地方使用它。例如，您可以將網站頁眉或頁腳視為一個塊。您可以安全地嵌套塊，例如，您可以將菜單塊放在頁眉塊內。

<ul class="menu"></ul>

因為原則上您應該能夠在頁面的任何位置重復使用塊，所以塊的CSS不應設置任何邊距或定位規(guī)則。最后，在選擇名稱時，請確保名稱描述塊的用途是什么，而不是它的外觀或狀態(tài)。換句話說，它的名稱應該回答這個問題：它是什么？（例如，頁眉、菜單等），而不是它是什么樣的？（例如，固定頁眉、小型菜單等）。

什么是元素？

根據BEM方法，元素是>塊的一部分，它沒有獨立的含義，并且在語義上與其塊相關聯。獲取BEM

以下是適用于元素的一些原則：

• 元素只能存在于塊內
• 元素不能屬于其他元素，它們只能是塊的一部分
• 您可以構建嵌套元素
• 元素名稱描述其用途，而不是其外觀
• 在命名元素時，您需要遵循以下約定：block__element

什么是修飾符？

修飾符是>定義塊或元素的外觀、狀態(tài)或行為的實體。BEM文檔

例如，頁眉塊可以固定在頁面頂部，手風琴塊可以打開或關閉，按鈕塊可以禁用等。BEM修飾符的命名約定如下所示：blockelementmodifier。這是BEM方法的核心。此外，BEM還提供文件結構組織原則、一套工具和一個活躍的社區(qū)來提供支持。

使用BEM的優(yōu)點

以下是您在項目中使用BEM的一些優(yōu)勢：

• 新開發(fā)人員可以快速理解標記中組件與CSS規(guī)則之間的關系
• 它促進團隊的生產力。在大型項目中，這種優(yōu)勢尤其明顯
• 命名約定降低了類名沖突和樣式泄漏的風險
• CSS不會與頁面內特定位置的標記緊密關聯
• CSS 是高度可重用的

SMACSS

可擴展和模塊化CSS架構（SMACSS）是一種用于組織和編寫CSS代碼的Web開發(fā)方法。其創(chuàng)建者Jonathan Snook將其描述如下：>SMACSS是一種檢查設計過程并使這些嚴格的框架適應靈活思維過程的方法。當使用CSS時，它試圖記錄一種一致的站點開發(fā)方法。SMACSS網站

其核心是對CSS規(guī)則進行分類。分類會帶來模式，即您在設計中重復出現多次的內容，您可以圍繞這些模式制定編寫可維護和可重用CSS的指南。SMACSS核心類別是：

• 基礎 — 此類別包含控制元素默認外觀的CSS規(guī)則。選擇器包括單個元素選擇器、屬性選擇器、偽類選擇器、同級選擇器等。例如，html、body、a、a:hover等。
• 布局 — 此類別用于將頁面劃分為各個部分的樣式。
• 模塊 — 模塊是設計的可重用積木式部件，例如菜單、對話框、搜索框等。
• 狀態(tài) — 此類別包括用于描述布局或模塊在特定狀態(tài)（例如，可見或隱藏、展開或關閉等）或特定視圖（例如，主頁或內部頁面）中的外觀的樣式。
• 主題 — 此類別類似于狀態(tài)，因為它包含負責布局和模塊外觀的CSS規(guī)則。并非所有項目都需要此額外類別，但了解它的存在總是有好處的。

SMACSS命名約定

與上面概述的類別相關，SMACSS提出了一種命名約定，以幫助代碼組織和開發(fā)團隊的生產力。布局、狀態(tài)和模塊規(guī)則以有意義的名稱或縮寫作為前綴。對于布局規(guī)則，例如layout-、grid-甚至簡單的l-都是可接受的前綴。對于狀態(tài)規(guī)則，約定是用is-作為狀態(tài)前綴，例如is-hidden、is-visible等。至于模塊，只需使用您正在構建的組件的名稱，例如.menu、.dialog等。例如，要設置打開的對話框的樣式，您可以在CSS中使用.dialog.is-open之類的選擇器。模塊內的相關元素以及同一模塊的變體應使用模塊的基本名稱作為前綴。此外，盡量不要使用ID、元素選擇器或嵌套選擇器。例如，要選擇名為menu的模塊內的菜單項，不要像這樣編寫選擇器：.menu li a，而應使用類似.menu-link或.menu-item的內容。與BEM不同，SMACSS不會規(guī)定過于嚴格的命名約定。Jonathan Snook明確表示：>……不要覺得您必須嚴格遵守這些指南。制定一個約定，記錄下來，并堅持下去。SMACSS網站

使用SMACSS的優(yōu)勢

SMACSS方法進行CSS編碼的一些優(yōu)勢包括：

• 它為模塊化、可維護的CSS提供了有效的指南，同時避免過于嚴格
• 您可以快速學習（和教授）SMACSS
• SMACSS命名約定不如BEM的冗長，在某些方面更容易掌握
• 它足夠靈活，可以很好地用于大型和小型項目

ECSS

持久性CSS或eCSS是>編寫樣式表以用于大型、快速變化、長期存在的Web項目的指南。eCSS網站

這種CSS方法確實引起了我對其作者Ben Frain對處理大規(guī)模CSS挑戰(zhàn)的原始觀點的極大興趣。eCSS的核心概念是隔離。隔離意味著每個組件都是一個獨立的代碼單元，沒有依賴性、沒有上下文負擔，可重用且可移除，而不會造成樣式泄漏的風險。這主要通過以下方式實現：

• 將所有代碼（不僅是CSS，而且是構建每個組件所需的所有技術）封裝在其自己的共享文件夾中。
• 每次需要與現有組件類似但有一些變體的組件時，即使變體很小，也要創(chuàng)建一個全新的組件。
• 使用嚴格的CSS命名約定

根據上述第二點，很明顯，重復屬性和值對于eCSS來說不是問題。在這方面，eCSS代表了與BEM和SMACSS等方法的根本區(qū)別，后者擴展或抽象現有組件，從而避免或盡可能避免代碼重復。這是否意味著eCSS會生成大型樣式表文件？不一定。在使用文件壓縮進行了一些測試后，Ben Frain得出結論，由于“gzip在壓縮重復字符串方面非常高效”，因此使用eCSS與其他更傾向于抽象而不是重復的方法之間的文件大小差異非常小。

使用eCSS的好處

以下是應用eCSS方法并接受其對重復的觀點可以獲得的好處：

• 通過保持每個視覺模式的隔離性，CSS代碼更容易維護
• 雖然您會發(fā)現重復的屬性和值，但從長遠來看，文件大小的增加仍然很小。這是因為模塊是自包含的、獨立的單元，您可以隨時快速刪除不再需要的模塊，而無需擔心會破壞設計
• 創(chuàng)建模塊所需的所有語言/技術文件共享同一個文件夾，這使得編輯和物理刪除不再需要的內容都變得非常容易。

您可以在Frain的書《持久性CSS》中閱讀這種創(chuàng)新方法的所有細節(jié)。

結論

編寫可維護且組織良好的CSS代碼具有其挑戰(zhàn)性。在本文中，我介紹了三種可以幫助完成此任務的方法。這絕不是一個詳盡的列表，而且這些方法都不能解決您在項目中可能遇到的所有問題。只需嘗試一下，看看什么適合您。您還可以嘗試將BEM和SMACSS結合使用，甚至可以根據您自己設定的問題集制定自己的方法。您編寫組織良好、易于管理的CSS代碼的黃金法則是什么？您認為使用CSS架構方法可以減輕痛苦嗎？點擊評論框讓我知道。

關于CSS架構方法的常見問題

OOCSS、SMACSS和BEM方法的主要區(qū)別是什么？

OOCSS、SMACSS和BEM都是旨在幫助開發(fā)人員編寫干凈、可維護和可擴展CSS的CSS方法。OOCSS或面向對象的CSS鼓勵開發(fā)人員編寫可重用、面向對象的代碼。它專注于將結構與外觀分離，并將容器與內容分離。SMACSS或可擴展和模塊化CSS架構提供對CSS規(guī)則進行分類的指南，以使您的代碼更靈活和更易于管理。BEM或塊元素修飾符是一種命名約定，使您的CSS更易于閱讀和理解。它將UI劃分為獨立的塊，這些塊可以重復使用和組合。

如何在CSS中實現WordPress編碼標準？

WordPress有自己的一套CSS編碼標準，以確保不同項目之間的一致性和可讀性。這些標準包括命名約定、縮進、間距和注釋的規(guī)則。要實現這些標準，您可以使用帶有WordPress配置的CSS棉絨工具，如Stylelint。

樣式表在Web開發(fā)中的作用是什么？

觀看《成為辦公室的CSS英雄，使用CSS架構制作結構化、可維護和可擴展的CSS》！觀看本課程 樣式表是一個文件或代碼形式，它定義網頁的布局和設計。它控制頁面上HTML元素的視覺呈現，包括布局、顏色、字體和動畫。CSS（層疊樣式表）是最常用的樣式表語言。

CSS方法如何改進我的Web設計流程？

CSS方法可以通過使您的CSS更具組織性、可重用性和可擴展性來極大地改進您的Web設計流程。它們提供了一種編寫CSS的結構化方法，這有助于降低代碼的復雜性，使其更易于理解和維護，并提高性能。

在HTML中編寫CSS的最佳實踐是什么？

在HTML中編寫CSS的最佳實踐包括通過使用外部樣式表將樣式與內容分離，有效地使用選擇器，對相關的樣式進行分組，使用速記屬性以及對代碼進行注釋以提高清晰度。驗證您的CSS也很重要，以確保它沒有錯誤并且與不同的瀏覽器兼容。

如何使我的CSS代碼更易于維護？

為了使您的CSS代碼更易于維護，您可以使用CSS方法，如OOCSS、SMACSS或BEM，它們提供構建和組織代碼的指南。其他策略包括將CSS模塊化，使用Sass或Less之類的預處理器以及遵循命名約定。

使用CSS預處理器的優(yōu)點是什么？

Sass和Less之類的CSS預處理器允許您在CSS中使用變量、嵌套、mixin和函數，這可以使您的代碼更易于閱讀和維護。它們還允許您編寫更簡潔和更強大的CSS。

如何確保我的CSS與不同的瀏覽器兼容？

為了確保您的CSS與不同的瀏覽器兼容，您可以使用Can I Use之類的工具，它顯示了CSS屬性在不同瀏覽器中的兼容性。對于并非所有瀏覽器都完全支持的CSS屬性，使用供應商前綴也很重要。

CSS在Web設計中的重要性是什么？

CSS在Web設計中至關重要，因為它控制網頁上內容的視覺呈現。它允許您創(chuàng)建具有視覺吸引力的網站，這些網站具有始終如一的設計和布局。它還使您可以根據不同類型的設備（如臺式機、平板電腦和移動電話）調整演示。

如何了解更多關于CSS方法的信息？

在線有很多資源可以學習CSS方法。SitePoint、Smashing Magazine和Mozilla Developer Network等網站提供深入的文章和教程。您還可以在Coursera和Udemy等平臺上找到在線課程。

以上是與這三個CSS方法論馴服不守規(guī)矩的表的詳細內容。更多信息請關注PHP中文網其他相關文章！