『前端規範化』CSS命名規範化

CSS命名規範化

CSS命名規範化，有利於代碼閱讀和維護，在大型項目及團隊協做開發中有着重要的意義。這裏我推薦採用BEM命名規範+適當的語義理解簡寫。由於BEM命名經常會由於太長而被人詬病，因此適當加上一些簡寫，既可保證良好的閱讀性同時保證良好的書寫性。

BEM命名規範

• block：模塊，名字單詞間用 - 鏈接
• element：元素，表示模塊的子元素，以 __ 與block鏈接
• modifier：修飾，表示模塊的變體，定義特殊模塊，以 -- 與block鏈接

語義理解簡寫

這裏我借鑑的是網易CSS框架NEC的簡寫規範 nec.netease.com/standard/cs…

可是不必刻板的照抄，吸收本身團隊能理解接受的簡寫便可。

Tips

• 當趕上block後面可能既要接element和modifier的狀況時，能夠考慮兩種思路：

  第一種思路：按照block__element--modifier的順序進行命名

  第二種思路：此時能夠考慮將element當作block來進行命名，即寫成block-element--modifier

• element後面仍是能夠繼續接block的

  例如 .van-button__loading-text 相似的命名方式

實踐舉例

.van-button{
    &--loading,
    &--disabled {}
    
    &__loading-text {}
}

.hd{
    &__text {}
    &__icon {}
    
    &__text--primary {}
    &__text--warning {}
}

.list{
    &-item {}
    &-item__text {}
    &-item__value {}
}
複製代碼

結語

最後，文無第一，規範化的東西並無一個獲得你們承認的最優解，歡迎你們討論本身的想法，共同努力去優化開發規範。