CSS整理(实用向)

本篇主要介绍一些CSS的注意事项 , 默认是有前置CSS知识的。

1. 每块代码之间间隔有序，不至于给人一个无比庞大的概念。
2. 层级控制不超过 3 层，避免了过多嵌套层级“恶心”人。
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 代码。