CSS命名規(guī)范化

CSS命名規(guī)范化，有利于代碼閱讀和維護，在大型項目及團隊協(xié)作開發(fā)中有著重要的意義。這里我推薦采用BEM命名規(guī)范+適當(dāng)?shù)恼Z義理解簡寫。因為BEM命名常常會因為太長而被人詬病，所以適當(dāng)加上一些簡寫，既可保證良好的閱讀性同時保證良好的書寫性。

BEM命名規(guī)范

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

語義理解簡寫

這里我借鑒的是網(wǎng)易CSS框架NEC的簡寫規(guī)范 nec.netease.com/standard/cs…

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

Tips

• 當(dāng)遇上block后面可能既要接element和modifier的情況時，可以考慮兩種思路：

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

  第二種思路：此時可以考慮將element看成block來進行命名，即寫成block-element--modifier

• element后面還是可以繼續(xù)接block的

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

實踐舉例

.van-button{&--loading,&--disabled {}&__loading-text {} }.hd{&__text {}&__icon {}&__text--primary {}&__text--warning {} }.list{&-item {}&-item__text {}&-item__value {} } 復(fù)制代碼

結(jié)語

最后，文無第一，規(guī)范化的東西并沒有一個得到大家認可的最優(yōu)解，歡迎大家討論自己的想法，共同努力去優(yōu)化開發(fā)規(guī)范。

轉(zhuǎn)載于:https://juejin.im/post/5c95c5f4f265da612e6d63ee

總結(jié)

以上是生活随笔為你收集整理的『前端规范化』CSS命名规范化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。