摘要：畢竟這是張鑫旭七年前的文章。命名法的意思就是塊元素修飾符是由團隊提出的一種前端命名方法論。但此法沒有經過大型項目的考驗，希望大神們來探討一下可行性。

本文主要是探討傳統項目中的css命名，vue、react等單頁應用都可以使用css-module來解決這個問題

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

張鑫旭大神的精簡法

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

張鑫旭大神的簡潔法是這樣的：

.fr {
    float: left;
}

.tc {
    text-align: center;
}

.pb8 {
    padding-bottom: 8px;
}

簡潔法重用率高，性能好，但是這么一堆class，有點寫行內式樣的感覺了，維護起來太難受了。畢竟這是張鑫旭七年前的文章。

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

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

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

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

舉個例子：

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

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

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

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

結果是這樣的：

不了解scss的同學可以看一下編譯后的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; }

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

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

一個項目里可能會有很多公共式樣，其實只要我們遵循一點規范便不會發生沖突。比如公共式樣我們統一帶上"p-"前綴。其它地方你就別用"p-"做前綴了。scss里的mixin、function、$variable我們也可以用起來，提高效率。

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

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

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

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

.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，對于一些只在子代中生效的式樣(大多如此)，帶上子代選擇器吧。多敲一個>，優點是css渲染效率更高，命名可以更佳隨意，你甚至可以這樣，雖然不推薦。

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

    
1
        
2
    

式樣并沒有沖突：

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

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

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

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

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

自己用了一段時間，如果不是非常復雜的項目(如評論區大神所說的動態css和動態dom)問題不大。有幾點感覺需要改進一下：
第一，為了避免嵌套過深和便于復用維護，模塊內部不要使用嵌套了，用scss寫到第二級就好
第二，父子選擇器還是不要用了，因為dom父子關系經常會變動，模塊內部css命名推薦用唯一的。

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