摘要：思考一個(gè)好的架構(gòu)一個(gè)好的架構(gòu)是具有良好的可擴(kuò)展性。定義手風(fēng)琴的展開或收起，鏈接的有效或無(wú)效，元素的隱藏或顯示。的命名規(guī)范命名組件的方式是非常流行特別有幫助的規(guī)范。目前該領(lǐng)域最豐富的思想領(lǐng)袖之一。

你有沒有在一個(gè)逐漸膨脹的 CSS 項(xiàng)目中感到混亂呢？保持樣式風(fēng)格統(tǒng)一和 HTML 的影響是比較困難的：盡管修改一個(gè)較小的問題，都可能創(chuàng)建更多丑陋的 hack，也可能 CSS 的小改變會(huì)影響 JavaScript 的功能。但是這些問題能在我們的項(xiàng)目開始的時(shí)候靜心規(guī)劃，就能很大程度上避免這些問題。讓我們開始說(shuō) CSS 架構(gòu)吧。

一個(gè)好的 CSS 架構(gòu)是具有良好的可擴(kuò)展性?？蓴U(kuò)展性是在任何項(xiàng)目開發(fā)中都是具有挑戰(zhàn)性的，范圍的擴(kuò)大或者團(tuán)隊(duì)人數(shù)的增加，這些挑戰(zhàn)在 CSS 中也不例外。層級(jí)和全局的特性使 CSS 很強(qiáng)大，反之在開發(fā)過程中也是脆弱的。如果你寫了一段時(shí)間 CSS，你會(huì)發(fā)現(xiàn)當(dāng)改變一行 CSS 來(lái)修復(fù)一個(gè)功能的時(shí)候會(huì)破壞一批其他的 CSS 功能，這將讓你很頭痛。細(xì)心的規(guī)劃能提供下列的好處：

更少的樣式

更少的樣式?jīng)_突

更長(zhǎng)的維護(hù)周期

更快的提升新團(tuán)隊(duì)成員

團(tuán)隊(duì)成員之間更容易交流

更平穩(wěn)的項(xiàng)目交接

Jonathan Snook 對(duì) CSS 規(guī)則進(jìn)行分類的概念在他的書中很受歡迎 Scalable and Modular Architecture for CSS-可擴(kuò)展的模塊化 CSS 架構(gòu)(SMACSS)。我們的結(jié)構(gòu)按下面的類型進(jìn)行分類能夠幫助我們以及我們的團(tuán)隊(duì)更好的理解每一個(gè)樣式的用途。我使用 7 種分類來(lái)定義規(guī)則集合，大多數(shù)是基于 SMACSS 推薦的做法，確保每一個(gè)風(fēng)格都適合這些類別之一。

基本樣式 (Base Styles)

對(duì)象 (Objects)

組件 (Components)

狀態(tài) (State)

主題 (Themes)

工具集 (Utilities)

JavaScript 勾子 (JavaScript hooks)

理解這些分類和目的，將有助于你寫出更高抽象層次的樣式。

基本樣式規(guī)則是創(chuàng)建在元素上。他們是你的網(wǎng)站想設(shè)置的全局默認(rèn)樣式。典型的，包括像：排版、box-sizing、你可能想統(tǒng)一所有瀏覽器元素的正常值。一個(gè)常見的錯(cuò)誤，你并不想要太重的基本元素風(fēng)格，并創(chuàng)建默認(rèn)值。你真的想移除無(wú)序列表的標(biāo)準(zhǔn)強(qiáng)調(diào)樣式或者只是在某些情況下移除它？

對(duì)象規(guī)則只關(guān)注結(jié)構(gòu)和布局。不被允許修飾類的樣式。對(duì)象類的概念是 Nicole Sullivan 推廣的，為了重用相同結(jié)構(gòu)和布局的頁(yè)面模式。在你的設(shè)計(jì)中尋找頁(yè)面結(jié)構(gòu)的模式，并創(chuàng)建可以在網(wǎng)站的多個(gè)組件或部分使用的對(duì)象類。通過把這些樣式映射為對(duì)象類，你就可能避免冗余，減少你的CSS的大小。網(wǎng)格系統(tǒng)，無(wú)論是手工編寫的或采用的一個(gè)框架，都適合使用對(duì)象類型。

組件是分離的、自成一體的 UI 零件。他們是面包和黃油的原子設(shè)計(jì)，將組成你的大多數(shù)樣式。一個(gè)組件能小到一個(gè)按鈕，或大到一個(gè)切換。創(chuàng)建魯棒性的組件的關(guān)鍵是使它們獨(dú)立于頁(yè)面的任何其他部分，并自成一體。你應(yīng)該能把一個(gè)組件放到頁(yè)面的任何位置，它都將保持它的結(jié)構(gòu)和設(shè)計(jì)。

狀態(tài)累是幫助修改一個(gè)組件的狀態(tài)。定義手風(fēng)琴的展開或收起，鏈接的有效或無(wú)效，元素的隱藏或顯示(visible)。在 JavaScript 中常見的添加、刪除狀態(tài) class。你只能更新一個(gè)狀態(tài) class 和允許樣式像定義的樣子，而不是用 JavaScript 去直接操作樣式。

主題類只需改變一個(gè)組件，使用唯一的顏色、字體或其他裝飾。主題類能用來(lái)修改整個(gè)頁(yè)面或只是一個(gè)的組件。主題不是在每一個(gè)項(xiàng)目中都必須的，但當(dāng)你需要的時(shí)候再使用它們。

    
A great quote from someone special.

工具集類是單一目的，幫助我們應(yīng)用一個(gè)特殊樣式規(guī)則。它們能用來(lái)修改間隙、增加字體大小、居中文本、添加一個(gè)浮動(dòng)清除 (clearfix)，隱藏等等。工具集能幫助你對(duì)布局進(jìn)行微調(diào)，像添加組件之間的間隙或者清除浮動(dòng)。它們也可以用來(lái)對(duì)現(xiàn)有組件進(jìn)行微調(diào)，而不需要?jiǎng)?chuàng)建一個(gè)新的組件。

.u-sp {
    margin-bottom: 1em !important;
}

.u-clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    font-size: 0;
}

.u-txt-center {
    text-align: center !important;
}

.u-txt-larger {
    font-size: 130% !important;
}

無(wú)論什么時(shí)候，解除你的 JavaScript 和樣式的耦合。將類名既用于樣式又用于 DOM 選擇的 JavaScript 勾子，當(dāng) CSS 被重構(gòu)的時(shí)候，JavaScript 的依賴就不清晰明了。相反，JavaScript 勾子類就是用來(lái)專注處理這類問題的。

當(dāng)你對(duì)類進(jìn)行命名的時(shí)候，確保你的名字足夠長(zhǎng)，能夠清晰表達(dá)（.pullquote 而不是縮寫的 .pq 來(lái)表達(dá)意思），但是有一些是不需要的（.nav 不用 .navigation）。類命名的可讀性能幫助團(tuán)隊(duì)成員現(xiàn)在和將來(lái)對(duì)你表達(dá)背后的邏輯的理解有重要的影響。

在編寫 CSS 的時(shí)候創(chuàng)建具有描述性的、有意義的名稱是最棘手的問題，如果能仔細(xì)考慮將很有幫助。本文有限不能夠?qū)γ氖虑橛懻摰锰钊?，但是能看一下我們非常棒的文章，命?CSS 真的很難-Ethan Muller，這篇文章對(duì)這個(gè)事情講解得更詳細(xì)。

BEM（Block Element Modifier）命名 CSS 組件的方式是非常流行、特別有幫助的規(guī)范。該規(guī)范來(lái)自于俄羅斯的搜索引擎-Yandex。這種命名方式非常簡(jiǎn)單：

[BLOCK]__[ELEMENT]-[MODIFIER]

你可能使用這種冗長(zhǎng)的類名稱很不習(xí)慣，但在你的項(xiàng)目中使用 BEM 將很快去掉這種擔(dān)心。下面是一個(gè)使用 BEM 來(lái)命名組件的例子：

    

        
        Alert Title
    
    
The password you entered is invalid.

BEM 命名有三個(gè)主要的好處：

可讀性：大多數(shù)元素的類名使用清晰的描述，能使其他人更容易閱讀你的 HTML 或者 CSS 文件。

自描述：使用分等級(jí)的類命名，能使它非常清晰的描述這個(gè)組件屬于哪一個(gè)基本組件。

特殊性：它可能在你的組件的每一個(gè)元素添加一個(gè)類的方式有點(diǎn)過了，但是，通過這樣做，你能保持你的每個(gè)選擇器都有特異性，讓覆蓋權(quán)重更加直接。

另外最好的實(shí)踐就是當(dāng)命名你的類名的時(shí)候，使用命名空間前綴來(lái)進(jìn)行分類。這些前綴會(huì)在你的命名前添加一組字符，但是這個(gè)值能立刻標(biāo)記每一個(gè)類的目的，在你看 HTML 或者樣式的時(shí)候是很需要的。我使用下面這些命名空間：

對(duì)象類：.o-

組件：.c-

狀態(tài)類：.is- 或者 .has-

主題：.t-

工具類：.u-

JavaScript 勾子：.js-

關(guān)于更多關(guān)于命名空間的信息，可以看 Harry Roberts"s post on the subject

像其他代碼一樣，你的 CSS 項(xiàng)目使用一致的編碼風(fēng)格是很重要的。這包括空格，縮進(jìn)，命名約定，注釋，等你能閱讀一些好的規(guī)范，比如：Google，Github 或者 Nicolas Gallagher。使用他們或者創(chuàng)建你自己更適合的規(guī)范。

對(duì)于較好的代碼組織，您應(yīng)該使用預(yù)處理工具（Sass，Less，Stylus）或者后處理器(PostCSS)去編譯你的代碼。他們有很多優(yōu)點(diǎn)，包括一些功能，比如：變量、函數(shù)、混淆、導(dǎo)入以及嵌套。這些功能將能讓你有更多的方式去組織 CSS 架構(gòu)，比你只用 CSS 來(lái)做更容易。

使用導(dǎo)入，你能將你的樣式分解到多個(gè)文件中。

@import "variables";
@import "mixins";
@import "normalize";
@import "typography";
@import "headings";
@import "headings";
@import "layout";
@import "carousel";

任何值需要多次使用的時(shí)候能定義變量。給你的變量名添加前綴，能幫助識(shí)別他們的目的，也為了使代碼完成更有用。

// Colors
$c-warning: Red;
$c-primary: Blue;
$c-background: White;

一些變量是需要全局定義的，應(yīng)該存儲(chǔ)在多帶帶的變量文件中，但其他變量只被用于單個(gè)的組件，這就應(yīng)該在使用它們的文件中定義。在 SASS 中，變量可以包含在嵌套的局部范圍內(nèi)。

.alert {
    $background-color: Red;
    $foreground-color: Cream;
    background-color: $background-color;
    color: $foreground-color;
}

注：其實(shí)這里準(zhǔn)備來(lái)應(yīng)該是 SCSS 語(yǔ)法，因?yàn)?SASS 語(yǔ)法是不需要花括號(hào)的。

由于 CSS 層級(jí)樣式的性質(zhì)，你的樣式順序可能是一個(gè)問題。如果你不確定樣式導(dǎo)入的順序，你將發(fā)現(xiàn)你自己始終在級(jí)聯(lián)問題上是頭疼的。

最近，Harry Roberts 發(fā)布了一篇 a sensible method for ordering your styles （一種使用的排序方法）他稱為 ITCSS （Inverted Triangle CSS），目的在于防止命名沖突、特殊性的問題，不好的風(fēng)格以及無(wú)意的回退（可以看他的 Slide in-depth slides）。這個(gè)概念很簡(jiǎn)單：以影響最小范圍和最低特殊性的樣式規(guī)則作為排序的開始，一直到最靠近選擇元素的和最高特殊性的樣式結(jié)尾。這意味著你的變量定義和基本元素規(guī)則將總是在最開始，然而你的工具類和 IE hack 將總是在最后。

Harry 定義了七組，適合我們文件應(yīng)該排序的分組：

設(shè)置（Settings）：變量和其他設(shè)置

工具（Tools）：自定義函數(shù)和混淆

常用的（Generic）：Font-face，box-sizing，normalize 等等

元素（Elements）：純?cè)啬J(rèn)值，比如標(biāo)題和鏈接

對(duì)象類（Objects）：布局和結(jié)構(gòu)類

組件（Componets）：獨(dú)立組件

（Trumps）：工具類和其他規(guī)則，這意味著在其他一切都是放到最后的

@import "settings.global";
@import "settings.colors";
@import "tools.functions";
@import "tools.mixins";
@import "generic.box-sizing";
@import "generic.normalize";
@import "elements.headings";
@import "elements.links";
@import "objects.wrappers";
@import "objects.grid";
@import "components.nav";
@import "components.buttons";
@import "components.promos";
@import "trumps.utilities";
@import "trumps.ie8";

本文只介紹了從深度和廣度上大量的主題，但是我希望它能夠讓你在組織和設(shè)計(jì)項(xiàng)目中的 CSS 的時(shí)候更多的思考。如果你想在以后深入這個(gè)主題，這篇文章有大量的資源鏈接，以及關(guān)注更多在這個(gè)領(lǐng)域的思想領(lǐng)袖的資源。

Harry Roberts - 目前該領(lǐng)域最豐富的思想領(lǐng)袖之一。能夠關(guān)注他的 Twitter，訂閱他的博客，閱讀他的 CSS Guidelines 文檔。

Jonathan Snook - 他的 CSS 架構(gòu)想法很受歡迎，以及他的紙質(zhì)和電子書，Scalable and Modular Architecture for CSS

Nicole Sullivan - 介紹過 OOCSS（Object Oriented CSS） 的概念，能夠翻閱文檔 Github wiki

這篇文章主要是基于最近在相同主題的分享。能檢出 slides for the presentation 或者觀看下面的視頻。

視頻容易掛，這里我直接貼鏈接，大家可以直接點(diǎn)看在瀏覽器播放就行了。

https://player.vimeo.com/video/172444121?byline=0&portrait=0

原文出自：https://seesparkbox.com/foundry/thoughtful_css_architecture

博客原文地址：http://60sky.com/post/thoughtful-css-architecture.html