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

Sakura同志發表於2019-03-23
前端CSS

CSS命名規範化

CSS命名規範化，有利於程式碼閱讀和維護，在大型專案及團隊協作開發中有著重要的意義。這裡我推薦採用BEM命名規範+適當的語義理解簡寫。因為BEM命名常常會因為太長而被人詬病，所以適當加上一些簡寫，既可保證良好的閱讀性同時保證良好的書寫性。

BEM命名規範

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

語義理解簡寫

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

但是沒必要刻板的照抄，吸取自己團隊能理解接受的簡寫即可。

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

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 {}
}
複製程式碼

結語

最後，文無第一，規範化的東西並沒有一個得到大家認可的最優解，歡迎大家討論自己的想法，共同努力去優化開發規範。

相關文章