前端规范与思考(二)———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选择器世界》
• 凹凸实验室