介紹兩種 CSS 方法論

前言

提及 CSS 命名規範，你們應該都很熟悉，或者應該據說過 BEM 。BEM 是由 Yandex 團隊提出的一種 CSS Class 命名方法，旨在幫助開發人員建立更好的且結構一致的 CSS 模塊。

BEM 將頁面的類名分爲塊（Block）、元素（Element）、修飾符（Modifier）。

• 塊（Block）：一個塊是視覺上或者語義上的一個總體，它是一個具體且惟一的一個元素，例如，頁面上的一個彈窗，或者是一個搜索框；
• 元素（Element）：通常認爲是塊的組成部分，元素比較用它父級的塊名稱作爲前綴，例如，彈窗的標題、關閉按鈕、確認按鈕；
• 修飾符（Modifier）：修飾符表示一個具體元素的特定狀態，例如，關閉按鈕在鼠標沒放上去和放上去的時候，呈現的兩種狀態。

如今用 Bootstrap 的彈窗組件，舉一個更加具體的例子：

鼠標放上去和沒放上去的狀態是有區別的。

經過上面的示例能夠看出，塊與元素是經過兩個下劃線（__）鏈接的，而元素和修飾符之間是經過兩個短橫線（--）鏈接的。

固然，今天的文章不會着重介紹什麼是 BEM，若是你以前沒接觸過 BEM 能夠嘗試去了解一下，而且多在在項目中試用幾回，感覺他的魅力。另外，如今網上已經有很是多的文章在介紹 BEM 了，耐心找，確定能找到優秀的教程的。今天的文章會分享比較少人介紹的兩種 CSS 方法論：SUIT CSS 和 SMACSS。

SUIT CSS

官方文檔：SUIT CSS命名約定( https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)

SUIT CSS是一種基於組件開發的 CSS 的方法論，它將類名分爲兩種類型：工具類和組件類。

工具類

CSS 中有不少固定工具類，好比：左右浮動、文本截斷、垂直居中……。工具類的做用是幫助程序減小一些重複代碼，並提供一致的實現。

命名規則：u-[sm-|md-|lg-]<工具類名>。工具類使用 u- 打頭，後面接類名（類名使用駝峯的方式命名），中間能夠加上 sm、md、lg 這種響應式的規則。

舉個栗子：

<div class="u-cf">
  <!-- 左浮動 -->
  <a class="u-floatLeft" href="https://blog.shenfq.com/">
    👉看看個人博客
  </a>
  <!-- 文本截斷，最大寬度200px -->
  <p class="u-textBreak u-maxWidth200">
    愛折騰的前端工程師，歡迎關注個人公衆號「更了不得的前端」
  </p>
</div>

組件類

組件類用來描述一個個具體的組件，組件是構成一個具體應用程序的基石，因此組件的設計特別重要。

命名規則：[<命名空間>-]<組件名>[-後代名][--修飾符]，這樣的命名方式，在編寫 HTML 和 CSS 的時候有幾個好處：

• 有助於區分組件的根元素，後代元素，以及用來修飾的類；
• 降級類名重複的概率；
• 可以讓類名更具備語義化；

下面來看看命名規則的各個部分的具體做用：

命名空間（可選）

命名空間是可選的，若是你但願避免本身定義的組件類名與引入的第三方樣式類名發生衝突，則能夠爲本身的類名加上命名空間。可是，若是大家業務中不存在第三方的樣式，則能夠不帶命名空間。

.sfq-Modal{} /* 個人彈窗組件 */
.sfq-Button {} /* 個人按鈕組件 */

組件名

組件名使用大駝峯規則（首字母大寫的駝峯規則，Pascal Case）來命名，使用這種方式也能夠儘量的避免出現同名樣式的衝突。

.Modal {}

<div class="Modal">
  …
</div>

組件名-後代名

組件的後代指附加在組件上的一部分，例如，彈窗組件的標題、按鈕等等。後代名稱使用小駝峯規則（首字母大寫的駝峯規則，Camel Case）命名。

<div class="Modal">
  <header class="Modal-title">
    <h2 class="Modal-titleName">歡迎關注</h2>
    <span class="Modal-closeBtn">X</span>
  </header>
  <div class="Modal-content">
    愛折騰的前端工程師，歡迎關注個人公衆號「更了不得的前端」
  </div>
</div>

組件名--修飾符

修飾符是一種表示組件特定狀態的類名，修飾符名稱一樣使用小駝峯規則來命名，而且和組件名直接須要用兩個短橫線（--）進行鏈接，這與 BEM 表現一致。

<button class="Button Button--default">點擊關注「更了不得的前端」</button>
<button class="Button Button--primary">點擊關注「更了不得的前端」</button>

變量名

SUIT CSS 除了定義了工具類、組件類這兩種命名方式外，還有定義了 CSS 變量的命名方式。命名規則： --組件名[-後代名|--修飾符]-(CSS屬性|變量名)。

:root {
  /* 基礎按鈕的背景色 */
  --Button--default-backgroundColor: #909399;
  /* 主要按鈕的背景色 */
  --Button--primary-backgroundColor: #409EFF;
}

SUIT CSS 小結

SUIT CSS 除了定義了工具類、組件類的命名方式外，還提供了完整的基礎類，以及測試套件用來檢測你的 CSS 類名是否符合規範，具體使用方法能夠查看官方文檔（https://github.com/suitcss/suit）。SUIT CSS 能夠說在 BEM 的基礎上進行了改進，特別是去除了雙下劃線的設計，在觀感上就比 BEM 美觀了許多，並且各類名稱都是經過駝峯的方式命名，省略了部分短橫線，這讓 SUIT CSS 的類名的長度上也會比 BEM 更加精簡。

SMACSS

SMACSS 官網： http://smacss.com/

SMACSS （Scalable and Modular Architecture for CSS）是一套易開發，易維護的 CSS 編寫的方法論，它將 CSS 規則一共分爲五大類：

1. Base（基礎）
2. Layout（佈局）
3. Module（模塊）
4. State（狀態）
5. Theme（主題）

你應該能在你現有項目的樣式裏發現上面的五個分類，這幾種類型的樣式混合在一塊兒會讓你的代碼顯得特別複雜，若是你有意識將這些樣式歸類，將大大下降複雜度。除了將樣式歸類以外，每一個類別還有一些適用的準則。

基礎規則

基礎規則做用於元素選擇器，用於定義 HTML 標籤的默認樣式。基礎樣式主要用於設置標題大小，默認連接顏色，默認字體樣式以及body背景等。

/* 基礎樣式示例 */
body, form {
    margin: 0;
    padding: 0;
}

a {
    color: #039;
}

a:hover {
    color: #03F;    
}

佈局規則

CSS 的本質上來講就是佈局頁面中的元素的，可是，頁面各個元素也是有主次之分的。例如，頭部、尾部這種大的區塊就是主要組件，咱們稱之爲佈局（Layout）。而導航欄（屬於頭部），網站說明（屬於尾部）這種區塊爲次要組件，咱們稱之爲模塊（Module）。

下面舉個具體的案例，來看看掘金的頁面佈局：

頁面上有一個頭部，一個導航條，一個內容區域以及一個側邊欄，這些都屬於佈局的部分。

SMACSS 中容許在佈局樣式中，使用 ID 選擇器，有助於在 HTML 中一眼區分出節點在佈局中的位置。其餘的非 ID 選擇器的類，須要添加 l- 前綴，表示這屬於佈局樣式。

<div id="header"></div>
<div id="navigation"></div>
<div id="content" class="l-left"></div>
<div id="sidebar" class="l-right"></div>

模塊規則

前面提到過模塊，模塊是相對與佈局組件來講，更加鬆散的次要組件，這個區分確實比較模糊，因此有一些方案也取消了佈局規則，將全部可重用組件都劃分爲模塊。

模塊規則在官方文檔沒有詳細的命名風格，我看了不少文章，在命名模塊的時候基本都是在參考 BEM，因此這裏再也不單獨介紹。

狀態規則

狀態是用來描述模塊在不一樣狀態下的外觀，使用 is- 前綴，這有助於咱們在 HTML 中區分元素的狀態。

<header id="header">
  <ul class="nav">
        <!-- 表示被選中 -->
    <li class="nav--item is-selected">歡迎關注</li>
    <li class="nav--item">歡迎關注</li>
  </ul>
</header>

某些狀態優先級比較高，能夠酌情加上 !important，例如用來控制元素顯示或隱藏的。

.is-hide {
    display: none !important;
}
.is-show {
    display: block !important;
}

SMACSS 小結

這裏沒有特別介紹主題規則，由於主題在當前這個時間，基本已經被 CSS 變量所替代。SMACSS 有不少的規則這裏沒有詳細列出來，可是在關於 CSS 如何命名方面的規則其實比較少，並且它的佈局規則與模塊規則確實有些模糊，不太好區分。