簡(jiǎn)評(píng)：Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。

使用連字符（'-'）分隔字符串

你可能習(xí)慣了在 Javascript 中使用小駝峰的命名方式：

var redBox = document.getElementById（'...'）

但是在 CSS 中不建議使用這種命名方式：

.redBox { 
  border：1px純紅色; 
}

而應(yīng)該使用這種：

.red-box { 
   border：1px純紅色; 
}

這是一個(gè)標(biāo)準(zhǔn)的 CSS 命名規(guī)則，有更好的可讀性。

此外，他和 CSS 屬性名稱一致。

//正確
.some-class { 
   font-weight：10em 
}
//錯(cuò)了
.some-class { 
   fontWeight：10em 
}

BEM 命名規(guī)范

團(tuán)隊(duì)有不同的方法來編寫 CSS 選擇器。一些團(tuán)隊(duì)使用連字符分隔符，而其他團(tuán)隊(duì)則傾向于使用更加結(jié)構(gòu)化的稱為 BEM 的命名規(guī)范。

一般來說，CSS 命名規(guī)范有三個(gè)問題要解決：

1. 能夠通過名字就能清楚選擇器的功能。
2. 能夠看出選擇器在哪里可以使用。
3. 能夠看出 class 之間的關(guān)系。

你有沒有見過這樣寫的類名：

.nav--secondary {
  ...
}
.nav__header {
  ...
}

這就是 BEM 命名規(guī)則。

B 代表塊（Block）

BEM 試圖將整個(gè)用戶界面分成可重用獨(dú)立的塊（Block，注意這里的 Block 并非指 inline-block），一個(gè) header 是一個(gè) block，header 里面嵌套的元素（logo、input、menu）也可以是 block 。

舉個(gè)例子下面的圖片：

這是一個(gè)火柴人（我們可以把它看做一個(gè) Block），按照之前的說法，這個(gè)組件的命名我們可以設(shè)為 stick-man 。

主鍵的樣式應(yīng)該如下所示：

.stick-man { 
  
}

E 代表元素

Block 中一般會(huì)有多個(gè)元素，舉個(gè)例子：火柴人有一個(gè) head，兩個(gè) arms 和 feets

head、feet、和 arms 是該組件中的所有元素。使用 BEM 命名規(guī)則，通過雙下劃線連接塊（Block）和元素（Elements）方式來命名。

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M 代表修飾符

BEM 中 M 代表修飾，可以對(duì)塊（Block）或元素（Element）進(jìn)行修飾（外觀或行為的調(diào)整），我們可以調(diào)整我們的火柴人生成藍(lán)色火柴人和紅色火柴人（實(shí)際上我們可能需要一個(gè)藍(lán)色按鈕和一個(gè)紅色按鈕）。

使用 BEM 的命名規(guī)則我們使用雙連接符來命名（'--'）

例如：

.stick-man--blue {
}
.stick-man--red {
}

修飾符也可用于元素（element），例如我們只想調(diào)整火柴人的頭部大小。我們可以這樣命名

.stick-man__head--small {
}
.stick-man__head--big {
}

以上就是 BEM 的命名方式，這種命名方式雖然有點(diǎn)啰嗦但是在復(fù)雜的工程中可以很好的理清各部分之間的關(guān)系，如果只是簡(jiǎn)單的工程直接使用分隔符命名就行了。

在 JavaScript 中用到的 CSS 類名應(yīng)該如何命名

當(dāng)你看到這個(gè)篇文章開始著手重構(gòu)自己的項(xiàng)目。

你將原來的代碼：

<div class="siteNavigation">
</div>

改成了：

<div class="site-navigation">
</div>

這看著很棒，但是你忘了你在某個(gè)地方（JavaScript）用到了這個(gè)類名：

//the Javasript code
const nav = document.querySelector('.siteNavigation')

這個(gè)時(shí)候 nav 將會(huì)得到 null。

為了防止這種情況，我們可以使用如下的命名來提醒我們。

使用 'js-*' 來命名

我們可以使用 js- 來命名我們的類:

<div class="site-navigation js-site-navigation">
</div>

在 JavaScript 代碼我們使用 js-site-navigation 來獲取該 DOM：

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

現(xiàn)在我們只要一看到 js- site-navigation 就會(huì)想到，在某個(gè) JavaScript 代碼中使用該類名獲取 DOM 對(duì)象。

總結(jié)

以上所述是小編給大家介紹的CSS 命名規(guī)范的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論