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

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

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

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

??

為什么我們需要強大的CSS架構(gòu)?

穩(wěn)固的 CSS 體系結(jié)構(gòu)基礎(chǔ)可以在項目開始擴展和發(fā)展時為其提供支持。如果基礎(chǔ)沒有經(jīng)過深思熟慮的思考和規(guī)劃，那么未來，你的項目很可能會倒塌。

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

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

在我的印象里，CSS在前端領(lǐng)域并沒有被廣泛的關(guān)注。我們花費大量的時間學(xué)習(xí)最新的 JavaScript 框架，卻堅持用淺顯的 CSS 理解湊合著構(gòu)建 Web 模塊。

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

我們可以使用哪些CSS架構(gòu)?

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

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

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

什么是 BEM？

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

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

什么是OOCSS？

OOCSS代表面向?qū)ο蟮腃SS，它是一種設(shè)計CSS的方法，推薦使用抽象來分離結(jié)構(gòu)樣式和可視化樣式，同時消除CSS的重復(fù)。

下面這個例子：

.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 顏色。這有助于我們保持樣式表整潔，避免重復(fù)。

什么是 SMACSS？

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

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

什么是 ACSS？

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

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

/* 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的類。

應(yīng)該選擇哪種 CSS 架構(gòu)？

簡單的說，選哪個都沒有關(guān)系。因為上面的幾種架構(gòu)都有優(yōu)點和缺點。不同的人在選擇上會有不同的看法。

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

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

總結(jié)

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

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

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