兩種 CSS 方法論你知道嗎？

作者：shenfq 2021-01-06 08:48:35

說(shuō)起 CSS 命名規(guī)范，大家應(yīng)該都很熟悉，或者應(yīng)該聽(tīng)說(shuō)過(guò) BEM 。BEM 是由 Yandex 團(tuán)隊(duì)提出的一種 CSS Class 命名方法，旨在幫助開(kāi)發(fā)人員創(chuàng)建更好的且結(jié)構(gòu)一致的 CSS 模塊。

[[373989]]

前言

BEM 將頁(yè)面的類(lèi)名分為塊(Block)、元素(Element)、修飾符(Modifier)。

塊(Block)：一個(gè)塊是視覺(jué)上或者語(yǔ)義上的一個(gè)整體，它是一個(gè)具體且唯一的一個(gè)元素，例如，頁(yè)面上的一個(gè)彈窗，或者是一個(gè)搜索框;
元素(Element)：一般認(rèn)為是塊的組成部分，元素比較用它父級(jí)的塊名稱(chēng)做為前綴，例如，彈窗的標(biāo)題、關(guān)閉按鈕、確認(rèn)按鈕;
修飾符(Modifier)：修飾符表示一個(gè)具體元素的特定狀態(tài)，例如，關(guān)閉按鈕在鼠標(biāo)沒(méi)放上去和放上去的時(shí)候，呈現(xiàn)的兩種狀態(tài)。

現(xiàn)在用 Bootstrap 的彈窗組件，舉一個(gè)更加具體的例子：

鼠標(biāo)放上去和沒(méi)放上去的狀態(tài)是有區(qū)別的。

通過(guò)上面的示例可以看出，塊與元素是通過(guò)兩個(gè)下劃線(__)連接的，而元素和修飾符之間是通過(guò)兩個(gè)短橫線(--)連接的。

當(dāng)然，今天的文章不會(huì)著重介紹什么是 BEM，如果你之前沒(méi)接觸過(guò) BEM 可以嘗試去了解一下，并且多在在項(xiàng)目中試用幾次，感受他的魅力。另外，現(xiàn)在網(wǎng)上已經(jīng)有非常多的文章在介紹 BEM 了，耐心找，肯定能找到優(yōu)秀的教程的。今天的文章會(huì)分享比較少人介紹的兩種 CSS 方法論：SUIT CSS 和 SMACSS。

SUIT CSS

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

SUIT CSS是一種基于組件開(kāi)發(fā)的 CSS 的方法論，它將類(lèi)名分為兩種類(lèi)型：工具類(lèi)和組件類(lèi)。

工具類(lèi)

CSS 中有很多固定工具類(lèi)，比如：左右浮動(dòng)、文本截?cái)唷⒋怪本又?hellip;…。工具類(lèi)的作用是幫助程序減少一些重復(fù)代碼，并提供一致的實(shí)現(xiàn)。

命名規(guī)則：u-[sm-|md-|lg-]<工具類(lèi)名>。工具類(lèi)使用 u- 打頭，后面接類(lèi)名(類(lèi)名使用駝峰的方式命名)，中間可以加上 sm、md、lg 這種響應(yīng)式的規(guī)則。

舉個(gè)栗子：

<div class="u-cf"> 
  <!-- 左浮動(dòng) --> 
  <a class="u-floatLeft" href="https://blog.shenfq.com/"> 
    👉看看我的博客 
  </a> 
  <!-- 文本截?cái)啵畲髮挾?00px --> 
  <p class="u-textBreak u-maxWidth200"> 
    愛(ài)折騰的前端工程師，歡迎關(guān)注我的公眾號(hào)「更了不起的前端」 
  </p> 
</div>

組件類(lèi)

組件類(lèi)用來(lái)描述一個(gè)個(gè)具體的組件，組件是構(gòu)成一個(gè)具體應(yīng)用程序的基石，所以組件的設(shè)計(jì)特別重要。

命名規(guī)則：[<命名空間>-]<組件名>[-后代名][--修飾符]，這樣的命名方式，在編寫(xiě) HTML 和 CSS 的時(shí)候有幾個(gè)好處：

有助于區(qū)分組件的根元素，后代元素，以及用來(lái)修飾的類(lèi);
降級(jí)類(lèi)名重復(fù)的幾率;
能夠讓類(lèi)名更具有語(yǔ)義化;

下面來(lái)看看命名規(guī)則的各個(gè)部分的具體作用：

命名空間(可選)

命名空間是可選的，如果你希望避免自己定義的組件類(lèi)名與引入的第三方樣式類(lèi)名發(fā)生沖突，則可以為自己的類(lèi)名加上命名空間。但是，如果你們業(yè)務(wù)中不存在第三方的樣式，則可以不帶命名空間。

.sfq-Modal{} /* 我的彈窗組件 */ 
.sfq-Button {} /* 我的按鈕組件 */

組件名

組件名使用大駝峰規(guī)則(首字母大寫(xiě)的駝峰規(guī)則，Pascal Case)來(lái)命名，使用這種方式也可以盡可能的避免出現(xiàn)同名樣式的沖突。

.Modal {}

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

組件名-后代名

組件的后代指附加在組件上的一部分，例如，彈窗組件的標(biāo)題、按鈕等等。后代名稱(chēng)使用小駝峰規(guī)則(首字母大寫(xiě)的駝峰規(guī)則，Camel Case)命名。

<div class="Modal"> 
  <header class="Modal-title"> 
    <h2 class="Modal-titleName">歡迎關(guān)注</h2> 
    <span class="Modal-closeBtn">X</span> 
  </header> 
  <div class="Modal-content"> 
    愛(ài)折騰的前端工程師，歡迎關(guān)注我的公眾號(hào)「更了不起的前端」 
  </div> 
</div>

組件名--修飾符

修飾符是一種表示組件特定狀態(tài)的類(lèi)名，修飾符名稱(chēng)同樣使用小駝峰規(guī)則來(lái)命名，并且和組件名直接需要用兩個(gè)短橫線(--)進(jìn)行連接，這與 BEM 表現(xiàn)一致。

<button class="Button Button--default">點(diǎn)擊關(guān)注「更了不起的前端」</button> 
<button class="Button Button--primary">點(diǎn)擊關(guān)注「更了不起的前端」</button>

變量名

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

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

SUIT CSS 小結(jié)

SUIT CSS 除了定義了工具類(lèi)、組件類(lèi)的命名方式外，還提供了完整的基礎(chǔ)類(lèi)，以及測(cè)試套件用來(lái)檢測(cè)你的 CSS 類(lèi)名是否符合規(guī)范，具體使用方法可以查看官方文檔(https://github.com/suitcss/suit)。SUIT CSS 可以說(shuō)在 BEM 的基礎(chǔ)上進(jìn)行了改進(jìn)，特別是去除了雙下劃線的設(shè)計(jì)，在觀感上就比 BEM 美觀了許多，而且各種名稱(chēng)都是通過(guò)駝峰的方式命名，省略了部分短橫線，這讓 SUIT CSS 的類(lèi)名的長(zhǎng)度上也會(huì)比 BEM 更加精簡(jiǎn)。

SMACSS

“SMACSS 官網(wǎng)：http://smacss.com/

SMACSS (Scalable and Modular Architecture for CSS)是一套易開(kāi)發(fā)，易維護(hù)的 CSS 編寫(xiě)的方法論，它將 CSS 規(guī)則一共分為五大類(lèi)：

Base(基礎(chǔ))
Layout(布局)
Module(模塊)
State(狀態(tài))
Theme(主題)

你應(yīng)該能在你現(xiàn)有項(xiàng)目的樣式里發(fā)現(xiàn)上面的五個(gè)分類(lèi)，這幾種類(lèi)型的樣式混合在一起會(huì)讓你的代碼顯得特別復(fù)雜，如果你有意識(shí)將這些樣式歸類(lèi)，將大大降低復(fù)雜度。除了將樣式歸類(lèi)之外，每個(gè)類(lèi)別還有一些適用的準(zhǔn)則。

基礎(chǔ)規(guī)則

基礎(chǔ)規(guī)則作用于元素選擇器，用于定義 HTML 標(biāo)簽的默認(rèn)樣式。基礎(chǔ)樣式主要用于設(shè)置標(biāo)題大小，默認(rèn)鏈接顏色，默認(rèn)字體樣式以及body背景等。

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

布局規(guī)則

CSS 的本質(zhì)上來(lái)說(shuō)就是布局頁(yè)面中的元素的，但是，頁(yè)面各個(gè)元素也是有主次之分的。例如，頭部、尾部這種大的區(qū)塊就是主要組件，我們稱(chēng)之為布局(Layout)。而導(dǎo)航欄(屬于頭部)，網(wǎng)站說(shuō)明(屬于尾部)這種區(qū)塊為次要組件，我們稱(chēng)之為模塊(Module)。

下面舉個(gè)具體的案例，來(lái)看看掘金的頁(yè)面布局：

juejin.cn

頁(yè)面上有一個(gè)頭部，一個(gè)導(dǎo)航條，一個(gè)內(nèi)容區(qū)域以及一個(gè)側(cè)邊欄，這些都屬于布局的部分。

juejin.cn

SMACSS 中允許在布局樣式中，使用 ID 選擇器，有助于在 HTML 中一眼區(qū)分出節(jié)點(diǎn)在布局中的位置。其他的非 ID 選擇器的類(lèi)，需要添加 l- 前綴，表示這屬于布局樣式。

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

模塊規(guī)則

前面提到過(guò)模塊，模塊是相對(duì)與布局組件來(lái)說(shuō)，更加松散的次要組件，這個(gè)區(qū)分確實(shí)比較模糊，所以有一些方案也取消了布局規(guī)則，將所有可重用組件都劃分為模塊。

模塊規(guī)則在官方文檔沒(méi)有詳細(xì)的命名風(fēng)格，我看了很多文章，在命名模塊的時(shí)候基本都是在參考 BEM，所以這里不再單獨(dú)介紹。

狀態(tài)規(guī)則

狀態(tài)是用來(lái)描述模塊在不同狀態(tài)下的外觀，使用 is- 前綴，這有助于我們?cè)?HTML 中區(qū)分元素的狀態(tài)。

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

某些狀態(tài)優(yōu)先級(jí)比較高，可以酌情加上 !important，例如用來(lái)控制元素顯示或隱藏的。

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

SMACSS 小結(jié)

這里沒(méi)有特別介紹主題規(guī)則，因?yàn)橹黝}在當(dāng)前這個(gè)時(shí)間，基本已經(jīng)被 CSS 變量所替代。SMACSS 有很多的規(guī)則這里沒(méi)有詳細(xì)列出來(lái)，但是在關(guān)于 CSS 如何命名方面的規(guī)則其實(shí)比較少，而且它的布局規(guī)則與模塊規(guī)則確實(shí)有些模糊，不太好區(qū)分。

本文轉(zhuǎn)載自微信公眾號(hào)「更了不起的前端」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系更了不起的前端公眾號(hào)。