摘要：畢竟這是張?chǎng)涡衿吣昵暗奈恼?。命名法的意思就是塊元素修飾符是由團(tuán)隊(duì)提出的一種前端命名方法論。但此法沒有經(jīng)過大型項(xiàng)目的考驗(yàn)，希望大神們來探討一下可行性。

本文主要是探討傳統(tǒng)項(xiàng)目中的css命名，vue、react等單頁應(yīng)用都可以使用css-module來解決這個(gè)問題

作為一名初級(jí)前端，免不了要切圖(寫css、html靜態(tài)部分)，寫css最頭痛的就是給class命名了，詞匯有限，本人又比較懶，想類名比布局還費(fèi)勁。在網(wǎng)上找了一通，css規(guī)范到是有比較統(tǒng)一的，接受度較高的。但css命名似乎沒有什么比較完美的方案。

張?chǎng)涡翊笊竦木?jiǎn)法

BEM命名法 - 大漠老師科普BEM

張?chǎng)涡翊笊竦暮?jiǎn)潔法是這樣的：

.fr {
    float: left;
}

.tc {
    text-align: center;
}

.pb8 {
    padding-bottom: 8px;
}

簡(jiǎn)潔法重用率高，性能好，但是這么一堆class，有點(diǎn)寫行內(nèi)式樣的感覺了，維護(hù)起來太難受了。畢竟這是張?chǎng)涡衿吣昵暗奈恼隆?/p> BEM命名法

BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對(duì)其他開發(fā)者來說更加透明而且更有意義。BEM命名約定更加嚴(yán)格，而且包含更多的信息，它們用于一個(gè)團(tuán)隊(duì)開發(fā)一個(gè)耗時(shí)的大項(xiàng)目。 ————摘自大漠老師BEM科普

BEM應(yīng)該算是比較科學(xué)比較系統(tǒng)的命名法了，每個(gè)class都BEM來一套，自然不會(huì)混亂。但是這冗長的類名寫起來，真讓人手軟。雖然用scss的&選擇器可以省不少事，不過html里的冗長類名還是免不了，pug等html模板也救不了我們啊。

于是我在想有沒有一種既科學(xué)又簡(jiǎn)潔的css命名法呢，于是我自創(chuàng)了一種命名空間法，在自己項(xiàng)目里用的倒挺開心。但此法沒有經(jīng)過大型項(xiàng)目的考驗(yàn)，希望大神們來探討一下可行性。

此法配合scss使用更佳哦，思想就是在最外層使用獨(dú)特的模塊命名，在內(nèi)層使用簡(jiǎn)單的類名，禁止在最外層使用簡(jiǎn)單的類名，不同的模塊之中，可以任意使用簡(jiǎn)單的類名，并不影響其他模塊。

舉個(gè)例子：

.m-header {
    .left {
        background: red;
        height: 10px;
    }

    .right {
        background: yellow;
        height: 10px;
    }
}

.m-body {
    .left {
        background: blue;
        height: 10px;
    }

    .right {
        background: green;
        height: 10px;
    }
}

結(jié)果是這樣的：

不了解scss的同學(xué)可以看一下編譯后的css：

.m-header .left {
  background: red;
  height: 10px; }
.m-header .right {
  background: yellow;
  height: 10px; }

.m-body .left {
  background: blue;
  height: 10px; }
.m-body .right {
  background: green;
  height: 10px; }

兩個(gè)模塊(m-header和m-body，模塊推薦以m-為前綴)中的.left和.right互不影響，只要我們?cè)谧钔鈱佣x一個(gè)獨(dú)特的類名，如同命名空間，并且不在最外層使用簡(jiǎn)單類名，防止沖突。那么我們就可以再模塊內(nèi)部隨意使用各種類名，當(dāng)然下個(gè)模塊內(nèi)可以再用一次，媽媽再也不擔(dān)心我詞匯量不足了，想不出名字了。

.top, .bottom, .left, .right上上下下左右左右baba一套又一套。為了規(guī)范推薦使用更加語義化的類名，當(dāng)然不必帶上長長的前綴。

一個(gè)項(xiàng)目里可能會(huì)有很多公共式樣，其實(shí)只要我們遵循一點(diǎn)規(guī)范便不會(huì)發(fā)生沖突。比如公共式樣我們統(tǒng)一帶上"p-"前綴。其它地方你就別用"p-"做前綴了。scss里的mixin、function、$variable我們也可以用起來，提高效率。

.p-btn {
    font-size: 14px;
}

.p-bg-green {
    background: green;
}

很多css規(guī)范里都規(guī)定嵌套不能超過四層，下面這個(gè)例子里我們已經(jīng)嵌套6層了。在scss里我們不能直接使用@at-root這會(huì)將簡(jiǎn)單類名暴露到最外層。使用&也不能避免嵌套過深。

這時(shí)我們需要使用@at-root 后面寫上模塊名空格即可防止嵌套過深，并避免式樣污染了。嵌套特別深的情況下推薦啟用子模塊。(這里可能存在漏洞，不知道大神們有沒有更優(yōu)雅的方案)

.m-header {
    .a {
        background: #000;
        .b {
            background: #111;
            .c {
                background: #222;
                @at-root .m-header .d {
                    background: #333;
                    .e {
                        background: #444;
                    }
                }
            }
        }
    }
}

編譯成css：

.m-header .a {
    background: #000;
}

.m-header .a .b {
    background: #111;
}

.m-header .a .b .c {
    background: #222;
}

.m-header .d {
    background: #333;
}

.m-header .d .e {
    background: #444;
}

如果你不用兼容老掉牙的ie6，對(duì)于一些只在子代中生效的式樣(大多如此)，帶上子代選擇器吧。多敲一個(gè)>，優(yōu)點(diǎn)是css渲染效率更高，命名可以更佳隨意，你甚至可以這樣，雖然不推薦。

.m-header {
    > .a {
        height: 40px;
        background: red;
        > .a {
            height: 20px;
            background: green;
        }
    }
}

    
1
        
2
    

式樣并沒有沖突：

最外層css模塊m-為前綴，并且類名獨(dú)一無二。

模塊內(nèi)元素式樣通過后代或子代選擇器約束，只作用與此模塊，使用簡(jiǎn)潔的語義化命名。

公共式樣使用p-為前綴。

禁止在最外層使用簡(jiǎn)單的類名，可增加特定前綴，防止污染模塊內(nèi)式樣。

此方法與很多編程語言的命名空間有著異曲同工之妙，大家應(yīng)該看到了私有變量和全局變量的味道。在下經(jīng)驗(yàn)尚淺，不知道此法有沒有大的漏洞，歡迎大家理性討論，指出問題或加以完善。

自己用了一段時(shí)間，如果不是非常復(fù)雜的項(xiàng)目(如評(píng)論區(qū)大神所說的動(dòng)態(tài)css和動(dòng)態(tài)dom)問題不大。有幾點(diǎn)感覺需要改進(jìn)一下：
第一，為了避免嵌套過深和便于復(fù)用維護(hù)，模塊內(nèi)部不要使用嵌套了，用scss寫到第二級(jí)就好
第二，父子選擇器還是不要用了，因?yàn)閐om父子關(guān)系經(jīng)常會(huì)變動(dòng)，模塊內(nèi)部css命名推薦用唯一的。

這種方法的確有很多人在用，比如網(wǎng)易的CSS規(guī)范 - 命名規(guī)則，我發(fā)誓之前沒有看過 :)逃了