本篇主要介绍一些CSS的注意事项 , 默认是有前置CSS知识的。
- 每块代码之间间隔有序，不至于给人一个无比庞大的概念。
- 层级控制不超过 3 层，避免了过多嵌套层级“恶心”人。
- 遵循了 BEM 命名规范，潜在的传递了关于元素之间的层级关系。
少即是多(Less is more):
// 存在多余的代码
.footer {
margin-top: 30px;
margin-bottom: 20px;
}
// 优化
.footer {
margin: 30px 0 20px 0;
}
自解释(CSS 的书写要尽量说明自己是干什么的):
// 存在模糊地方
.footer:first-child {
color: #FFF;
font-size: 18px;
}
//优化
.footer-title {
color: #FFF;
font-size: 18px;
}
BEM 命名本身已经很好的完善了一些css的规则。这套规范即避免了不同文件下的命名冲突，还很好的赋予了 CSS 类名的语义化。让我们的脑子对于 CSS 那种模糊的印象变得条理清晰。
<div class="person-center__wrap">
<div class="person-center__main">
<div class="userInfo-name">
王狗蛋
</div>
<div class="userinfo-age">
24
</div>
</div>
<div class="person-center__footer">
<div class="sctions-comfirm">
确定
</div>
</div>
</div>
实用类(例如一个用来移除默认列表样式的类):
.nobullets {
list-style: none;
margin: 0;
padding: 0;
}
避免太特定的选择器:
//之前
article.main p.box {
border: 1px solid #ccc;
}
//之后
.box {
border: 1px solid #ccc;
}
分割大样式表为多个小样式表:
一般项目中都会有一个 styles，里面存储一些全局共用的样式文件。根据这些文件的作用，一般又会被细分为reset.csss、variables.less等文件。搭配上预处理语言的 mixin 功能，我们就可以维护一份常用的样式文件，避免在具体的页面书写冗杂的 CSS 代码。
