【51CTO.com快譯】你曾經開發大型前端項目時是不是有這樣的經歷，項目的 JavaScript 源文件結構清晰，但想要對 CSS 進行更改時，就會遇到一堆亂七八糟的非結構化 CSS 。

雖然你知道添加或修改哪些 CSS 屬性，但是寫代碼時還是很小心謹慎，因為在很多地方有 CSS 屬性被覆蓋，在某些情況下，甚至還使用了 !important。由于擔心增加或者修改代碼會破壞現有樣式，所以你會創建一個新的規則，這會讓混亂的情況進一步增加。

這是許多前端項目都面臨的問題。

當你的項目開始擴展或新的前端工程師加入團隊時，理解如何在你的項目代碼庫中組織 CSS 是非常重要的。本篇文章將通過不同的想法，幫助你創建更強大的CSS架構。 

??

為什么我們需要強大的CSS架構?

穩固的 CSS 體系結構基礎可以在項目開始擴展和發展時為其提供支持。如果基礎沒有經過深思熟慮的思考和規劃，那么未來，你的項目很可能會倒塌。

當然，CSS不太可能像 JavaScript 錯誤那樣破壞你的系統，但它可以產生不同的問題，使項目工作非常困難。如果你的團隊對在項目中添加或更改 CSS 沒有信心，那么他們會添加 Bug，這些 Bug 會影響用戶的體驗，使項目受到影響。

因此，開始一個項目時，有一個可靠的 CSS 架構是非常必要的，**畢竟編寫糟糕的CSS 要比刪除它更容易。**

在我的印象里，CSS在前端領域并沒有被廣泛的關注。我們花費大量的時間學習最新的 JavaScript 框架，卻堅持用淺顯的 CSS 理解湊合著構建 Web 模塊。

我想這是我們都犯過的錯誤，也是我想要改變的事情。

我們可以使用哪些CSS架構?

當我開始研究這個主題時，有許多CSS架構脫穎而出：

• OOCSS (Object-Oriented CSS)
• SMACSS (Scalable and Modular Architecture for CSS)
• ACSS(Atomic CSS)
• BEM (Block Element Modifier)

這次我簡要描述下每種方法。

什么是 BEM？

BEM代表塊元素修飾符，是一種構建CSS的方法，推薦在創建樣式類時使用一致的命名約定。BEM推薦的命名約定是 block-name__element-name--modifier-name。

• block-name：描述應設置樣式的塊。例如：photo。
• __element-name：描述該塊中應設置樣式的元素。例如：photo_image。
• --modifier-name：描述正在設置樣式的塊或元素的修改器。例如：photo__image--black-and-white。

什么是OOCSS？

OOCSS代表面向對象的CSS，它是一種設計CSS的方法，推薦使用抽象來分離結構樣式和可視化樣式，同時消除CSS的重復。

下面這個例子：

.button {
padding: 10px 16px;
color: blue;
}
.h1 {
font-size: 2em;
color: blue;
}

OOCSS會更改成如下：

.button {
padding: 10px 16px;
}
.h1 {
font-size: 2em;
}
.primary {
color: blue;
}

通過我們的新抽象，我們可以將 primary 類分配給兩個 button 和 h1 元素，并被賦予 blue 顏色。這有助于我們保持樣式表整潔，避免重復。

什么是 SMACSS？

SMACSS代表CSS的可擴展和模塊化體系結構。它要求在五種不同類別下構建樣式：base，layout，module，state 和 theme。

• Base 樣式應保留你默認的CSS樣式。這些樣式將用于網站或應用程序的所有元素。
• Layout 樣式應該包含元素的樣式，這些元素的設計目的是將頁面分離為其結構組件。頁眉、頁腳和網格等元素的樣式應該在這里定義。
• Module 樣式應該包含跨網站或應用程序的可重用元素的樣式。
• State 樣式應該定義你的網站或應用程序中不同元素的不同狀態。諸如“is-active”、“is-disabled”和“is-success”之類的樣式。
• Theme 樣式應該決定元素的外觀。他們應該超越基本的樣式，并開始注入你的項目的風格到網站或應用程序。

什么是 ACSS？

ACSS代表 Atomic CSS，它專注于創建許多小型 CSS 實用工具類，供你在 HTML 中使用。與 OOCSS 相似的是，它們都建議將重復的屬性值分離到它們自己的規則中。ACSS可以被看作是OOCSS的一個更極端的版本，因為它鼓勵你在盡可能小的層次上創建樣式。

下面是使用Atomic CSS項目中的一些樣式規則示例：

/* Colours */
.color-primary { color: blue; }
.color-secondary { color: purple; }

/* Margins */
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }

與OOCSS的不同是，ACSS 建議在 CSS 選擇器的命名約定中使用CSS屬性。比如在OOCSS中你可以定義一個 .primary 類將元素的顏色更改為藍色。但在 ACSS 中你需要定義一個 .color-primary的類。

應該選擇哪種 CSS 架構？

簡單的說，選哪個都沒有關系。因為上面的幾種架構都有優點和缺點。不同的人在選擇上會有不同的看法。

最重要的是，在開始編寫CSS之前，確保您的團隊已經同意使用一致的格式。這種格式可以是上面提到的架構之一，或者是不同架構的混合，或者是你自己想出來的東西。

負責該項目的工程團隊應該理解這種結構，以便編寫的任何新CSS都遵循選擇的樣式。最好是在文檔中解釋體系結構，這樣新加入團隊的工程師也能夠快速、輕松地了解項目所選擇的體系結構。

總結

無論你選擇如何構建項目，都必須確保不要忘記 CSS，并嘗試維護 CSS 代碼保持一致樣式，使新工程師更容易上手，讓他們能夠自信地進行更改。確保這些規則被記錄和執行，最好以自動化的方式。

如果在項目開始階段不花時間創建一套強大的規則來管理 CSS 的編寫方式，那么長遠來看，遇到問題時花費的時間將會更多。所以，為了后續更高效的編寫代碼，前期的規則制定很有必要。 

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】