剛入行前端的時候，看見了百度的前端代碼規範，到現在隻是其中的幾個點一直有在注意。有興趣可以看看：
百度前端編碼規範
CSS命名其實挺随意的，使用駝峰、-、_都可以，并不影響使用，常用的應該是-和下劃線_連接配接。我一直使用的是-，因為各大UI庫或者是CSS庫都是使用-，這應該也成為一個标準規範。
CSS挺容易造成樣式污染的，每個子產品或者頁面之間，總有一些命名容易相同，解決也簡單，用權重或者重寫，隻是這種場景有時候還是挺頭疼。
scoped
vue中，style都會加上scoped，打包之後标簽上面會有很多data-v-4df10a14，而CSS是.test[data-v-65a7937e]。
平時我們不會關注這個，這其實是CSS的屬性選擇器，打包的時候給每個标簽都添加一個唯一的data-v-hash。
module
這個沒用過，也沒有去弄個demo，大緻意思就是可以自己定義編譯的規則，把類名編譯成隻對目前元件有效的字元串，可以是hash字元，也可以是帶元件名類名加hash字元串，最終就是得到唯一的類名。
test.vue
.test-button{}
//編譯成
.test_test-button_4df1{}
//或者
._3zyde4l1yATCOkgn{} 複制
BEM模式
這個是原生的命名規則，純粹靠自我限制，BEM由塊（Block）、元素（Element）、修飾符（Modifier）組成，塊__元素--修飾符：
- B:block,對應子產品名，如dialog
- E:element 對應子產品中的節點，如button
- M:modifier 對應節點的狀态，disabled
- 最終class名 dialog__button--disabled
使用BEM的element：el-cascader-node__label、el-date-table-cell__text
其它沒去找。
每種方法都各自有優缺點，無非就是從樣式污染、樣式覆寫、命名規範。
scoped：做到了樣式隔離在内部，但是會被外部或者子元件被父元件污染，或者得用deep進行穿透，如果dom特别多的情況下，data-v-hash會稍微導緻頁面渲染性能。
module：通過類名，做到了絕對隔離，但又因為絕對隔離，修改樣式或者複用又變得困難。
BEM：隔離和污染做的很好，但是名字太長長，命名困難，多人協作的情況下通過人為約定限制實作BEM太過困難。
在我看來，scoped > module > BEM，引用工具來限制和人為限制肯定是選擇使用工具去限制，module和scoped對比，也隻是工具對類名的不同處理。