前言
說起 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命名約定(github.com/suitcss/sui…)
SUIT CSS是一種基於元件開發的 CSS 的方法論，它將類名分為兩種型別：工具類和元件類。
工具類
CSS 中有很多固定工具類，比如：左右浮動、文字截斷、垂直居中……。工具類的作用是幫助程式減少一些重複程式碼，並提供一致的實現。
命名規則：u-[sm-|md-|lg-]<工具類名>。工具類使用 u- 打頭，後面接類名（類名使用駝峰的方式命名），中間可以加上 sm、md、lg 這種響應式的規則。
舉個栗子：
<div class="u-cf">
<!-- 左浮動 -->
<a class="u-floatLeft" href="http://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 類名是否符合規範，具體使用方法可以檢視官方文件（http://github.com/suitcss/suit）。SUIT CSS 可以說在 BEM 的基礎上進行了改進，特別是去除了雙下劃線的設計，在觀感上就比 BEM 美觀了許多，而且各種名稱都是通過駝峰的方式命名，省略了部分短橫線，這讓 SUIT CSS 的類名的長度上也會比 BEM 更加精簡。
SMACSS
SMACSS 官網：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）。
下面舉個具體的案例，來看看掘金的頁面佈局：
頁面上有一個頭部，一個導航條，一個內容區域以及一個側邊欄，這些都屬於佈局的部分。
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 如何命名方面的規則其實比較少，而且它的佈局規則與模組規則確實有些模糊，不太好區分。