好的 CSS 命名規范可以節約 Debug 時間

wean 發布于2019-08-30 14:00 / 2236人閱讀

摘要：簡評是一種很耗時的操作，如果有良好的命名規范可以節約很多的時間。一些團隊使用連字符分隔符，而其他團隊則傾向于使用更加結構化的稱為的命名規范。一般來說，命名規范有三個問題要解決能夠通過名字就能清楚選擇器的功能。

簡評：Debug CSS 是一種很耗時的操作，如果有良好的命名規范可以節約很多的 Debug 時間。

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

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

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

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

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

而應該使用這種：

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

這是一個標準的 CSS 命名規則，有更好的可讀性。

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

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

BEM 命名規范

團隊有不同的方法來編寫 CSS 選擇器。一些團隊使用連字符分隔符，而其他團隊則傾向于使用更加結構化的稱為 BEM 的命名規范。

一般來說，CSS 命名規范有三個問題要解決：

能夠通過名字就能清楚選擇器的功能。

能夠看出選擇器在哪里可以使用。

能夠看出 class 之間的關系。

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

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

這就是 BEM 命名規則。

B 代表塊（Block）

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

舉個例子下面的圖片：

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

主鍵的樣式應該如下所示：

.stick-man { 

}

E 代表元素

Block 中一般會有多個元素，舉個例子：火柴人有一個 head，兩個 arms 和 feets

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

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

M 代表修飾符

BEM 中 M 代表修飾，可以對塊（Block）或元素（Element）進行修飾（外觀或行為的調整），我們可以調整我們的火柴人生成藍色火柴人和紅色火柴人（實際上我們可能需要一個藍色按鈕和一個紅色按鈕）。

使用 BEM 的命名規則我們使用雙連接符來命名（"--"）

例如：

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

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

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

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

在 JavaScript 中用到的 CSS 類名應該如何命名

當你看到這個篇文章開始著手重構自己的項目。

你將原來的代碼：

改成了：

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

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

這個時候 nav 將會得到 null。

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

使用 "js-*" 來命名

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

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

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

現在我們只要一看到 js-site-navigation 就會想到，在某個 JavaScript 代碼中使用該類名獲取 DOM 對象。

英文原文： CSS Naming Conventions that Will Save You Hours of Debugging

云服務器 GPU云服務器命名規范二級域名命名規范 html的命名規范二級域名命名規范

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115694.html

前端領域的BEM到底是什么

摘要：在這篇譯什么是我們為什么需要他們的結尾處，明確指出不需要，那么到底是什么呢下面我將把官網的教程翻譯出來，帶領大家搞清楚前端領域的到底是什么。命名在計算機科學領域，只有個非常難解決的問題一個是緩存失效，而另一個則是命名。在這篇【譯】什么是CSS Modules ？我們為什么需要他們？的結尾處，明確指出CSS Modules不需要BEM，那么BEM到底是什么呢？下面我將把BEM官網的教...

GitChat 2019-08-29 15:15 評論0 收藏0
【推薦】jquery開發的大型web應用—H5編輯器工具

H5編輯器介紹 H5DS (HTML5 Design software) 這是一款基于WEB的 H5制作工具。讓不會寫代碼的人也能輕松快速上手制作H5頁面，界面如下 showImg(https://segmentfault.com/img/bVUC2L?w=1147&h=643); 制作流程注冊 -> 登錄 -> 新建H5 -> 編輯H5 （添加頁面，添加圖層，拖動設置參數） -> 預覽/保存/...

keithyau 2019-08-21 16:21 評論0 收藏0
【推薦】jquery開發的大型web應用—H5編輯器工具

H5編輯器介紹 H5DS (HTML5 Design software) 這是一款基于WEB的 H5制作工具。讓不會寫代碼的人也能輕松快速上手制作H5頁面，界面如下 showImg(https://segmentfault.com/img/bVUC2L?w=1147&h=643); 制作流程注冊 -> 登錄 -> 新建H5 -> 編輯H5 （添加頁面，添加圖層，拖動設置參數） -> 預覽/保存/...

Gu_Yan 2019-08-29 13:24 評論0 收藏0
(css/js)如何起個好名字

摘要：就會給起名表示求和函數，漸漸地知道最好用英語給變量或者是函數名起名字，盡管有時候英語不好，那就翻翻有道吧。所以有一段時間的命名是很長的兩三個單詞的駝峰法命名。什么鬼，又不知道怎么命名class了直接進入正文記得大一學C語言的時候，那個時候根本沒把這當回事吧。所謂的混沌階段變量名，函數名，隨意吧，那個時候寫簡單地c程序，就好像寫著玩，就算復雜點得也不過一二百行，所以變量名什么的，可能...

Rainie 2019-08-28 18:22 評論0 收藏0