前端規範與思考(二)———css規範

本文屬於原創文章，轉載請註明--來自桃源小盼的部落格

前言

由於團隊使用了vue框架，所以有些規範是在vue規則下制定的。

命名規則參考上一篇文章前端規範與思考(一)———命名規範。

標準規範

1.元件中的style標籤使用scoped屬性，如果有全域性生效的樣式，新增一個無scoped屬性的style標籤

<style>

</style>
<style scoped>

</style>

2.選擇器命名使用序列命名法

// bad
.activityTitle {
}

.activity_title {
}

// good
.activity-title {
}

為什麼不採用複雜的BEM方式？

因為現在我們有了更好的方式：css模組化。vue的scoped是其中的一種實現方式，我們不再需要BEM中的模組字首，來隔離不同的模組。

3.禁止選擇器巢狀

特殊情況：覆蓋第三方庫的樣式時。

如果選擇器巢狀，那麼當html結構改變時，css樣式也要改變，增加維護成本。

// bad
<div class="activity">
   <div class="item"></div>
</div>

.activity .item {
}

// good
<div class="activity">
   <div class="activity-item"></div>
</div>

.activity-item {
}

4.類名組合單詞長度不要超過5級

// bad
.activity-box-item-ul-li-a {
}

// good
.activity-item-li-a {
}

5.禁止使用標籤選擇器

標籤選擇器會同時命中多個標籤，修改單條css樣式會影響多個地方。

// bad
<li></li>

li {
}

// good
<li class="activity-item"></li>
.activity-item {
}

6.禁止使用!important

一旦樣式使用了important，如果需要被覆蓋時，難以被覆蓋。

7.禁止使用id選擇器

id選擇器具有唯一性，並且權重過高。

8.禁止使用*號選擇器

理由：影響範圍太大，造成的結果很難預料。

9.z-index不要設定過大， 一般的浮層元素1-9，彈窗之類的10-99

特殊情況：覆蓋第三方類庫

10. 塊級元素預設width: 100%，不用宣告

經常會有小夥伴寫出這個樣式，只是為了提醒。

推薦規範

1.盒子、容器命名

.activity-box {}
.activity-wrapper {}
.activity-container {}

2.圖片命名

.activity-img {}

3.列表命名

.activity-item {}
.activity-li {}

4..超連結a標籤命名

.activity-a {}
.activity-link {}

5.相關描述命名

.activity-desc {}

6.表單元素命名

.activity-input {}
.activity-radio {}
.activity-checkbox {}

7.互動狀態命名

啟用狀態類名：.active
禁用狀態類名：.disabled

<li class="item active"></li>

.item.active {
  color: red;
}

8. 優先使用flex佈局

結語

其實對於一個團隊來說，任何可能重複、經常會犯錯的點、更好的寫法。這一類的事情都可以去提煉成規範。

對於css來說，制定團隊的reset.css也是必不可少的一部分。

任何別人的規範，都不是銀彈，我們只能去探索最適合自己的css規範。

參考資料

• 《深入解析css》
• 《css選擇器世界》
• 凹凸實驗室