與這三個CSS方法論馴服不守規矩的表

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

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

關鍵要點

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

為什麼CSS代碼會失控？

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

BEM

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

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

什麼是塊？

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

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

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

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

什麼是元素？

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

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

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

什麼是修飾符？

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

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

使用BEM的優點

以下是您在項目中使用BEM的一些優勢：

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

SMACSS

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

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

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

SMACSS命名約定

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

使用SMACSS的優勢

SMACSS方法進行CSS編碼的一些優勢包括：

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

ECSS

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

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

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

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

使用eCSS的好處

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

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

您可以在Frain的書《持久性CSS》中閱讀這種創新方法的所有細節。

結論

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

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

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

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

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

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

樣式表在Web開發中的作用是什麼？

觀看《成為辦公室的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預處理器的優點是什麼？

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

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

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

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

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

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

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

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