CSS规范

命名规则 - BEM

使用简洁易懂的单词，如header
多个单词用-隔开，如app-header
使用__表示层级关系，如header__title
使用--表示变体，如header--dark
层级控制在4级内，最好不超过3级，如header__title__icon
嵌套元素过多时，可直接在内部抽象出另一层组件，减少层级

实例：

<header class="header">
  <h1 class="header__title">
    <i class="header__title__icon"></i>标题
  </h1>
</header>

<header class="header">
  <h1 class="header__title">
    <i class="header__title__icon">标题
  </h1>
  <!--层级过多时，应灵活分层-->
  <!--避免class名过多嵌套，写出`header__title-wrapper__title__icon这样的名称`-->
  <div class="sub-title-wrapper">
    <h2 class="sub-title">
      <i class="sub-title-icon"></i>副标题
    </h2>
  </div>
</header>

<header class="header header--dark">
  <h1 class="header__title">
    <i class="header__title__icon"></i>标题
  </h1>
</header>

其它可选规则：rscss、SMACSS、OOCSS

规则排序

.example {
  /* 内容 */
  /* 用在伪元素上 */
  content: "";

  /* 特定 */
  /* 某些特定元素的特有规则 */
  list-style: none;
  border-collapse: collapse;

  /* 定位与浮动 */
  position: relative;
  top: 10px;
  right: 5px;
  float: left;
  clear: both;

  /* 显示 */
  display: block;
  visibility: visible;
  opacity: 1;

  /* 盒模型 */
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  overflow: hidden;

  /* 背景 */
  background-color: red;
  background-size: 100%;
  /* object-类规则看作背景规则的一种 */
  object-fit: cover;
  object-position: center;

  /* 前景 */
  color: #fff;

  /* 字体、排版 */
  font-size: 1rem;
  font-variant: captalize;
  line-height: 1.3;
  /* 排版类型的规则较多，且多数不常用，顺序可灵活调动 */
  vertical-align: middel;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  word-break: normal;

  /* 变换 */
  transform: translate(50%);

  /* 动画 */
  transition: 0.3s;
  animation: flip 0.3s linear;
  will-change: opacity;
}