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

雖然你知道添加或修改哪些 CSS 屬性，但是寫代碼時(shí)還是很小心謹(jǐn)慎，因?yàn)樵诤芏嗟胤接?CSS 屬性被覆蓋，在某些情況下，甚至還使用了 !important。由于擔(dān)心增加或者修改代碼會(huì)破壞現(xiàn)有樣式，所以你會(huì)創(chuàng)建一個(gè)新的規(guī)則，這會(huì)讓混亂的情況進(jìn)一步增加。

這是許多前端項(xiàng)目都面臨的問題。

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

??

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

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

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

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

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

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

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

當(dāng)我開始研究這個(gè)主題時(shí)，有許多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)建樣式類時(shí)使用一致的命名約定。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è)計(jì)CSS的方法，推薦使用抽象來分離結(jié)構(gòu)樣式和可視化樣式，同時(shí)消除CSS的重復(fù)。

下面這個(gè)例子：

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

OOCSS會(huì)更改成如下：

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

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

什么是 SMACSS？

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

• Base 樣式應(yīng)保留你默認(rèn)的CSS樣式。這些樣式將用于網(wǎng)站或應(yīng)用程序的所有元素。
• Layout 樣式應(yīng)該包含元素的樣式，這些元素的設(shè)計(jì)目的是將頁面分離為其結(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)該超越基本的樣式，并開始注入你的項(xiàng)目的風(fēng)格到網(wǎng)站或應(yīng)用程序。

什么是 ACSS？

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

下面是使用Atomic CSS項(xiàng)目中的一些樣式規(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中你可以定義一個(gè) .primary 類將元素的顏色更改為藍(lán)色。但在 ACSS 中你需要定義一個(gè) .color-primary的類。

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

簡單的說，選哪個(gè)都沒有關(guān)系。因?yàn)樯厦娴膸追N架構(gòu)都有優(yōu)點(diǎn)和缺點(diǎn)。不同的人在選擇上會(huì)有不同的看法。

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

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

總結(jié)

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

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

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