思考 CSS 架構

QuyenGiffen 8年前發布 | 9K 次閱讀 CSS 前端技術

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

思考一個好的架構

一個好的 CSS 架構是具有良好的可擴展性。可擴展性是在任何項目開發中都是具有挑戰性的，范圍的擴大或者團隊人數的增加，這些挑戰在 CSS 中也不例外。層級和全局的特性使 CSS 很強大，反之在開發過程中也是脆弱的。如果你寫了一段時間 CSS，你會發現當改變一行 CSS 來修復一個功能的時候會破壞一批其他的 CSS 功能，這將讓你很頭痛。細心的規劃能提供下列的好處：

更少的樣式
更少的樣式沖突
更長的維護周期
更快的提升新團隊成員
團隊成員之間更容易交流
更平穩的項目交接

CSS 規則的類型

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

基本樣式 (Base Styles)
對象 (Objects)
組件 (Components)
狀態 (State)
主題 (Themes)
工具集 (Utilities)
JavaScript 勾子 (JavaScript hooks)

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

基本樣式 (Base Styles)

基本樣式規則是創建在元素上。他們是你的網站想設置的全局默認樣式。典型的，包括像：排版、 box-sizing 、你可能想統一所有瀏覽器元素的正常值。一個常見的錯誤，你并不想要太重的基本元素風格，并創建默認值。你真的想移除無序列表的標準強調樣式或者只是在某些情況下移除它？

對象 (Objects)

對象規則只關注結構和布局。不被允許修飾類的樣式。對象類的概念是 Nicole Sullivan 推廣的，為了重用相同結構和布局的頁面模式。在你的設計中尋找頁面結構的模式，并創建可以在網站的多個組件或部分使用的對象類。通過把這些樣式映射為對象類，你就可能避免冗余，減少你的CSS的大小。網格系統，無論是手工編寫的或采用的一個框架，都適合使用對象類型。

組件 (Components)

組件是分離的、自成一體的 UI 零件。他們是面包和黃油的原子設計，將組成你的大多數樣式。一個組件能小到一個按鈕，或大到一個切換。創建魯棒性的組件的關鍵是使它們獨立于頁面的任何其他部分，并自成一體。你應該能把一個組件放到頁面的任何位置，它都將保持它的結構和設計。

狀態 (State)

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

主題 (Themes)

主題類只需改變一個組件，使用唯一的顏色、字體或其他裝飾。主題類能用來修改整個頁面或只是一個的組件。主題不是在每一個項目中都必須的，但當你需要的時候再使用它們。

<blockquote class="c-pullquote t-light">
    <p>A great quote from someone special.</p>
</blockquote>

工具集 (Utilities)

工具集類是單一目的，幫助我們應用一個特殊樣式規則。它們能用來修改間隙、增加字體大小、居中文本、添加一個浮動清除 (clearfix)，隱藏等等。工具集能幫助你對布局進行微調，像添加組件之間的間隙或者清除浮動。它們也可以用來對現有組件進行微調，而不需要創建一個新的組件。

.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;
}

<div class="promo u-sp"></div>
<div class="promo u-sp"></div>
<div class="promo"></div>

JavaScript Hooks

無論什么時候，解除你的 JavaScript 和樣式的耦合。將類名既用于樣式又用于 DOM 選擇的 JavaScript 勾子，當 CSS 被重構的時候，JavaScript 的依賴就不清晰明了。相反，JavaScript 勾子類就是用來專注處理這類問題的。

<button class="btn btn--buy js-buy-now"></button>

類的命名

當你對類進行命名的時候，確保你的名字足夠長，能夠清晰表達（.pullquote 而不是縮寫的 .pq 來表達意思），但是有一些是不需要的（.nav 不用 .navigation）。類命名的可讀性能幫助團隊成員現在和將來對你表達背后的邏輯的理解有重要的影響。

在編寫 CSS 的時候創建具有描述性的、有意義的名稱是最棘手的問題，如果能仔細考慮將很有幫助。本文有限不能夠對命名的事情討論得太深入，但是能看一下我們非常棒的文章，命名 CSS 真的很難 - Ethan Muller ，這篇文章對這個事情講解得更詳細。

BEM 的命名規范

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

[BLOCK]__[ELEMENT]-[MODIFIER]

你可能使用這種冗長的類名稱很不習慣，但在你的項目中使用 BEM 將很快去掉這種擔心。下面是一個使用 BEM 來命名組件的例子：

<div class="alert alert--warning">
    <h1 class="alert__title">
        <span class="alert__icon"></span>
        Alert Title
    </h1>
    <p class="alert__description">The password you entered is invalid.</p>
</div>

BEM 命名有三個主要的好處：

可讀性：大多數元素的類名使用清晰的描述，能使其他人更容易閱讀你的 HTML 或者 CSS 文件。
自描述：使用分等級的類命名，能使它非常清晰的描述這個組件屬于哪一個基本組件。
特殊性：它可能在你的組件的每一個元素添加一個類的方式有點過了，但是，通過這樣做，你能保持你的每個選擇器都有特異性，讓覆蓋權重更加直接。

命名空間

另外最好的實踐就是當命名你的類名的時候，使用命名空間前綴來進行分類。這些前綴會在你的命名前添加一組字符，但是這個值能立刻標記每一個類的目的，在你看 HTML 或者樣式的時候是很需要的。我使用下面這些命名空間：

對象類： .o-
組件： .c-
狀態類： .is- 或者 .has-
主題： .t-
工具類： .u-
JavaScript 勾子： .js-

<footer class="c-footer">
    <div class="o-container-wide">
        <a class="c-footer__logo" href="/">The Assist</a>
        <div class="c-social c-social--follow">
            <div class="c-social__label u-txt-center">Join the conversation</div>
            <ul class="c-social__list">
                <li class="c-social__item"></li>
                <li class="c-social__item is-active"></li>
                <li class="c-social__item"></li>
            </ul>
        </div>
        <p class="c-footer__credit"></p>
    </div>
</footer>

關于更多關于命名空間的信息，可以看 Harry Roberts's post on the subject

代碼風格

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

組織代碼

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

使用導入，你能將你的樣式分解到多個文件中。

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

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

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

一些變量是需要全局定義的，應該存儲在單獨的變量文件中，但其他變量只被用于單個的組件，這就應該在使用它們的文件中定義。在 SASS 中，變量可以包含在嵌套的局部范圍內。

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

注：其實這里準備來應該是 SCSS 語法，因為 SASS 語法是不需要花括號的。

源代碼順序

由于 CSS 層級樣式的性質，你的樣式順序可能是一個問題。如果你不確定樣式導入的順序，你將發現你自己始終在級聯問題上是頭疼的。

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

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

設置（Settings）：變量和其他設置
工具（Tools）：自定義函數和混淆
常用的（Generic）：Font-face，box-sizing，normalize 等等
元素（Elements）：純元素默認值，比如標題和鏈接
對象類（Objects）：布局和結構類
組件（Componets）：獨立組件
（Trumps）：工具類和其他規則，這意味著在其他一切都是放到最后的

@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";

更深的挖掘

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

來自：http://www.zcfy.cc/article/thoughtful-css-architecture-1574.html

本文由用戶 QuyenGiffen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1478141379501.html

CSS 前端技術