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

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

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

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

為什麼CSS代碼會(huì)失控？

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

BEM

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

這裡的關(guān)鍵概念是長期易於維護(hù)項(xiàng)目和組件的可重用性。 BEM的核心策略是藉助智能命名約定將CSS代碼組織成可重用的模塊。讓我們仔細(xì)看看。

什麼是塊？

識(shí)別塊是應(yīng)用BEM方法的關(guān)鍵步驟。塊是一個(gè)>功能獨(dú)立的頁面組件，可以重複使用。在HTML中，塊由class屬性表示。 BEM文檔。

在決定將什麼視為塊時(shí)，問問自己是否可以輕鬆刪除該部分代碼並在其他地方使用它。例如，您可以將網(wǎng)站頁眉或頁腳視為一個(gè)塊。您可以安全地嵌套塊，例如，您可以將菜單塊放在頁眉?jí)K內(nèi)。

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

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

什麼是元素？

根據(jù)BEM方法，元素是>塊的一部分，它沒有獨(dú)立的含義，並且在語義上與其塊相關(guān)聯(lián)。獲取BEM

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

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

什麼是修飾符？

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

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

使用BEM的優(yōu)點(diǎn)

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

• 新開發(fā)人員可以快速理解標(biāo)記中組件與CSS規(guī)則之間的關(guān)係
• 它促進(jìn)團(tuán)隊(duì)的生產(chǎn)力。在大型項(xiàng)目中，這種優(yōu)勢(shì)尤其明顯
• 命名約定降低了類名衝突和樣式?jīng)┑娘L(fēng)險(xiǎn)
• CSS不會(huì)與頁面內(nèi)特定位置的標(biāo)記緊密關(guān)聯(lián)
• CSS 是高度可重用的

SMACSS

可擴(kuò)展和模塊化CSS架構(gòu)（SMACSS）是一種用於組織和編寫CSS代碼的Web開發(fā)方法。其創(chuàng)建者Jonathan Snook將其描述如下：>SMACSS是一種檢查設(shè)計(jì)過程並使這些嚴(yán)格的框架適應(yīng)靈活思維過程的方法。當(dāng)使用CSS時(shí)，它試圖記錄一種一致的站點(diǎn)開發(fā)方法。 SMACSS網(wǎng)站

其核心是對(duì)CSS規(guī)則進(jìn)行分類。分類會(huì)帶來模式，即您在設(shè)計(jì)中重複出現(xiàn)多次的內(nèi)容，您可以圍繞這些模式製定編寫可維護(hù)和可重用CSS的指南。 SMACSS核心類別是：

• 基礎(chǔ) — 此類別包含控制元素默認(rèn)外觀的CSS規(guī)則。選擇器包括單個(gè)元素選擇器、屬性選擇器、偽類選擇器、同級(jí)選擇器等。例如，html、body、a、a:hover等。
• 佈局 — 此類別用於將頁面劃分為各個(gè)部分的樣式。
• 模塊 — 模塊是設(shè)計(jì)的可重用積木式部件，例如菜單、對(duì)話框、搜索框等。
• 狀態(tài) — 此類別包括用於描述佈局或模塊在特定狀態(tài)（例如，可見或隱藏、展開或關(guān)閉等）或特定視圖（例如，主頁或內(nèi)部頁面）中的外觀的樣式。
• 主題 — 此類別類似於狀態(tài)，因?yàn)樗?fù)責(zé)佈局和模塊外觀的CSS規(guī)則。並非所有項(xiàng)目都需要此額外類別，但了解它的存在總是有好處的。

SMACSS命名約定

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

使用SMACSS的優(yōu)勢(shì)

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

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

ECSS

持久性CSS或eCSS是>編寫樣式表以用於大型、快速變化、長期存在的Web項(xiàng)目的指南。 eCSS網(wǎng)站

這種CSS方法確實(shí)引起了我對(duì)其作者Ben Frain對(duì)處理大規(guī)模CSS挑戰(zhàn)的原始觀點(diǎn)的極大興趣。 eCSS的核心概念是隔離。隔離意味著每個(gè)組件都是一個(gè)獨(dú)立的代碼單元，沒有依賴性、沒有上下文負(fù)擔(dān)，可重用且可移除，而不會(huì)造成樣式?jīng)┑娘L(fēng)險(xiǎn)。這主要通過以下方式實(shí)現(xiàn)：

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

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

使用eCSS的好處

以下是應(yīng)用eCSS方法並接受其對(duì)重複的觀點(diǎn)可以獲得的好處：

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

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

結(jié)論

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

關(guān)於CSS架構(gòu)方法的常見問題

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

OOCSS、SMACSS和BEM都是旨在幫助開發(fā)人員編寫乾淨(jìng)、可維護(hù)和可擴(kuò)展CSS的CSS方法。 OOCSS或面向?qū)ο蟮腃SS鼓勵(lì)開發(fā)人員編寫可重用、面向?qū)ο蟮拇a。它專注於將結(jié)構(gòu)與外觀分離，並將容器與內(nèi)容分離。 SMACSS或可擴(kuò)展和模塊化CSS架構(gòu)提供對(duì)CSS規(guī)則進(jìn)行分類的指南，以使您的代碼更靈活和更易於管理。 BEM或塊元素修飾符是一種命名約定，使您的CSS更易於閱讀和理解。它將UI劃分為獨(dú)立的塊，這些塊可以重複使用和組合。

如何在CSS中實(shí)現(xiàn)WordPress編碼標(biāo)準(zhǔn)？

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

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

觀看《成為辦公室的CSS英雄，使用CSS架構(gòu)製作結(jié)構(gòu)化、可維護(hù)和可擴(kuò)展的CSS》！ 觀看本課程 樣式表是一個(gè)文件或代碼形式，它定義網(wǎng)頁的佈局和設(shè)計(jì)。它控制頁面上HTML元素的視覺呈現(xiàn)，包括佈局、顏色、字體和動(dòng)畫。 CSS（層疊樣式表）是最常用的樣式表語言。

CSS方法如何改進(jìn)我的Web設(shè)計(jì)流程？

CSS方法可以通過使您的CSS更具組織性、可重用性和可擴(kuò)展性來極大地改進(jìn)您的Web設(shè)計(jì)流程。它們提供了一種編寫CSS的結(jié)構(gòu)化方法，這有助於降低代碼的複雜性，使其更易於理解和維護(hù)，並提高性能。

在HTML中編寫CSS的最佳實(shí)踐是什麼？

在HTML中編寫CSS的最佳實(shí)踐包括通過使用外部樣式表將樣式與內(nèi)容分離，有效地使用選擇器，對(duì)相關(guān)的樣式進(jìn)行分組，使用速記屬性以及對(duì)代碼進(jìn)行註釋以提高清晰度。驗(yàn)證您的CSS也很重要，以確保它沒有錯(cuò)誤並且與不同的瀏覽器兼容。

如何使我的CSS代碼更易於維護(hù)？

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

使用CSS預(yù)處理器的優(yōu)點(diǎn)是什麼？

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

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

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

CSS在Web設(shè)計(jì)中的重要性是什麼？

CSS在Web設(shè)計(jì)中至關(guān)重要，因?yàn)樗匮u網(wǎng)頁上內(nèi)容的視覺呈現(xiàn)。它允許您創(chuàng)建具有視覺吸引力的網(wǎng)站，這些網(wǎng)站具有始終如一的設(shè)計(jì)和佈局。它還使您可以根據(jù)不同類型的設(shè)備（如臺(tái)式機(jī)、平板電腦和移動(dòng)電話）調(diào)整演示。

如何了解更多關(guān)於CSS方法的信息？

在線有很多資源可以學(xué)習(xí)CSS方法。 SitePoint、Smashing Magazine和Mozilla Developer Network等網(wǎng)站提供深入的文章和教程。您還可以在Coursera和Udemy等平臺(tái)上找到在線課程。

以上是與這三個(gè)CSS方法論馴服不守規(guī)矩的表的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！