前端組件化開發時組件className命名規範

前言

前端開發不管web仍是h5都會涉及各類規範，腳手架使用規範、目錄規範、命名規範、文檔規範、流程規範等等，本文主要針對前端命名規範中dom元素類名（className）的命名規範提出我的的一些想法，但願能給讀者帶來幫助或啓發。css

主流命名規範

1. OOCSS

Object-Oriented CSS，示例：html

<div class="sizeOne bgBlue solidGray"></div>

.sizeOne {width: 25%;}
.bgBlue {background:blue;}
.solidGray {border: 1px solid #ccc;}
複製代碼

oocss的核心原則：前端

獨立的結構和樣式
獨立的容器和內容

其優勢：vue

減小CSS代碼
具備清潔的HTML標記，有語義的類名，邏輯性強的層次關係
語義標記，有助於SEO
更好的頁面優化，更快的加載時間（由於有不少組件重用）
可擴展的標記和CSS樣式，有更多的組件能夠放到庫中，而不影響其餘的組件
能輕鬆構造新的頁面佈局，或製做新的頁面風格

其缺陷：react

OOCSS適合真正的大型網站開發，由於大型網站用到的可重用性組件特別的多，若是運用在小型項目中可能見不到什麼成效。因此用不用OOCSS應該根據你的項目來決定。
若是沒用巧妙的使用，建立組件可能對於你來講是一堆沒用的東西，成爲一爛攤子，給你的維護帶來意想不到的杯具，說不定仍是個維護的噩夢。
最好給每個組件備寫一份說明文檔，有助於調用與維護
參考連接：www.w3cplus.com/css/oocss-c…

2. SMACSS

參考連接：medium.com/@savemuse/s…web

3. SUITCSS

參考連接：w3ctech.com/topic/1939markdown

4. Atomic

參考連接：www.geeksforgeeks.org/introductio…框架

5. BEM

參考連接：getbem.com/introductio…dom

Block、Element、Modifier，BEM是我目前在使用的命名方式，也是本文重點要講述的，基於BEM的規範制定了一套符合業務、框架以及開發模式的規範。首先簡單介紹下BEM，詳細內容可查看參考連接。oop

Block

獨立的有意義的實體，eg：

header、container、menu、checkbox、input、footer等，它是在整個頁面佈局時，劃分的單獨模塊。

Element

元素，是Block下的子元素，其沒有獨立的意義，但屬於Block的一部分，eg：

menu item、 list item、 checkbox caption、 header title

Modifier

Block或Element上的標誌標識，用來改變外觀、狀態、行爲、標記等，eg：

disabled、 highlighted、 checked、 fixed、 size big、 color yellow

個人命名規範

基於BEM，我進行了擴展，我認爲項目名也能夠是一個Block，而項目旗下的頁面，組件均可以視爲block下的元素element，項目是獨立的實體，組件、頁面是其的一部分，page、component等是他的標識modifier，該概念徹底符合BEM的設計理念，也比較適用於咱們項目開發。

在咱們使用vue、react或者angular開發業務時，勢必會涉及到這幾個概念：

頁面級組件；
全局通用組件；
模塊內通用組件；
頁面獨有的組件；

針對這些場景，咱們如何命名區分，達到經過類名就能大體瞭解組件的用途，甚至自注釋，同時也能有效的防止命名重複致使的樣式衝突呢？

1. 頁面級組件

路由所對應的頁面，也稱爲頁面級組件。

<項目縮寫>__<頁面>--page

eg：
項目：淘寶我的中心（taobao personal center）；
頁面：個人訂單；
命名：tpc__my-orders--page
複製代碼

2. 全局通用組件

全局通用的組件，適用於不一樣模塊下的多個頁面。

<項目縮寫>__<組件名>--global-component

eg:
項目：淘寶我的中心（taobao personal center）
通用組件：按鈕組件
命名：tpc__button--global-component
複製代碼

3. 模塊內通用組件

模塊內多個頁面都要用到的組件，我將它稱之爲模塊內通用組件。

<項目縮寫>__<組件名>--module-component

eg：
項目：淘寶我的中心（taobao personal center）
模塊內通用組件：彈窗組件
命名：tpc__modal--module-component
複製代碼

4. 頁面獨有組件

僅適用於當前頁面的組件，我將它稱之爲頁面獨有組件。

<項目縮寫>__<組件名>--component

eg：
項目：淘寶我的中心（taobao personal center）
模塊內通用組件：標籤組件
命名：tpc__tag--component
複製代碼

modifier新增四種：page、global-component、module-component、component。

組件名、模塊名、頁面名稱都使用 ‘-’ 鏈接，eg：record-item、award-detail。

以上的命名都是針對組件容器的class命名，那麼組件內部的子元素該如何命名呢？

1. 統一前綴命名

全部子元素都使用統一的前綴去命名，eg：tpc__button__text。

該方法的缺點，若是組件名稱長，看着不優雅，不少重複，若使用變量定義，eg：

const classPrefix = 'tpc_datetime-picker'

<div className={`${classPrefix}__title`} />
複製代碼

這麼寫的話，總感受也不是特別優雅，但也還在接受範圍。

2. 使用組件名前綴

使用組件名稱，去除項目簡寫，eg：button--disabled

針對子元素內部的命名，eg：button__label--warning

在組件開發過程當中，建議能夠將前綴使用變量保存，css也是。如此去命名你的class，既明瞭，又能防止命名重複致使樣式衝突，讓每個類變得更有意義。可能有的前端比較反感命名長，喜歡用簡短的命名，能夠適當調整類名的前綴，讓class不顯得過長，如此命名，防重複，類名可讀性很高，會讓你的業務更清晰，html的結構層次也更明瞭。