[[373989]]

前言

說起 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 規則一共分為五大類：

• Base(基礎)
• Layout(布局)
• Module(模塊)
• State(狀態)
• Theme(主題)

你應該能在你現有項目的樣式里發現上面的五個分類，這幾種類型的樣式混合在一起會讓你的代碼顯得特別復雜，如果你有意識將這些樣式歸類，將大大降低復雜度。除了將樣式歸類之外，每個類別還有一些適用的準則。

基礎規則

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

/* 基礎樣式示例 */ 
body, form { 
    margin: 0; 
    padding: 0; 
} 
 
a { 
    color: #039; 
} 
 
a:hover { 
    color: #03F;     
} 

布局規則

CSS 的本質上來說就是布局頁面中的元素的，但是，頁面各個元素也是有主次之分的。例如，頭部、尾部這種大的區塊就是主要組件，我們稱之為布局(Layout)。而導航欄(屬于頭部)，網站說明(屬于尾部)這種區塊為次要組件，我們稱之為模塊(Module)。

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

juejin.cn

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

juejin.cn

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 如何命名方面的規則其實比較少，而且它的布局規則與模塊規則確實有些模糊，不太好區分。

本文轉載自微信公眾號「更了不起的前端」，可以通過以下二維碼關注。轉載本文請聯系更了不起的前端公眾號。