css 实践

reset css

reset css 是一种用于规范化浏览器默认样式的技术，它的主要作用是确保不同浏览器之间具有一致的默认样式。由于不同浏览器对 HTML 标签的默认样式存在差异，而且这些差异可能会导致页面在不同浏览器中显示不一致的问题。

推荐使用 https://necolas.github.io/normalize.css/ 来同各浏览器样式差异。

类风格 css

提供一些可重用的 CSS 类，通过在 HTML 元素上添加这些类，这样就避免了使用嵌套和复杂的选择器，而是直接使用单独的 CSS 类来设置样式属性。这样做的好处是可以减少代码量、提高可维护性和可读性，并且更容易实现响应式布局和移动优化等功能。

平常开发中，通过给标签命名来添加样式，一层一层添加，最后取名字都要想半天，后期改动还容易被污染。

<template>
  <div class="demo-container">
    <div class="demo-title">
      <!-- 此处打断施法，在想名字 -->
      <div class="demo-???"></div>
    </div>
    <div class="demo-desc"></div>
  </div>
</template>

<style lang="scss">
.demo-container {
  padding: 10px;
  background: #aaa;
  .demo-title {
    color: green;
    font-size: 16px;
  }
  .demo-desc {
    color: red;
    font-size: 12px;
  }
}
</style>

使用重用类名来重构它，将样式逐个拆分。

<template>
  <div class="pd-small bg-grey">
    <div class="font-medium color-success">
      <div class="font-mini"></div>
    </div>
    <div class="font-mini color-danger"></div>
  </div>
</template>

<style lang="scss">
.pd-small {
  padding: 10;
}

.bg-grey {
  background-color: #aaa;
}

.font-mini {
  font-size: 12px;
}

.font-medium {
  font-size: 16px;
}

.color-danger {
  color: red;
}

.color-success {
  color: green;
}
</style>

上面代码中样式内容可以封装到单独的文件中，在全局引入使用，这样方便维护，逻辑也非常清晰。

当遇到一些复杂样式时，可以预设一组样式来完成。比如一个 hover 交互按钮，当其它元素只需要 hover 交互时，直接添加对应类名即可。

<template>
  <button class="btn-default btn-hover">按钮</button>
</template>

<style lang="scss">
.btn-default {
  border: 1px solid #000;
  background-color: #fff;
  // ...
}

.btn-hover:hover {
  border-color: red;
  background-color: #aaa;
  // ...
}
</style>

尺寸设计

在设计尺寸时，一般三种尺寸基本够用，但保险起见也可以使用五种尺寸：mini、small、medium、large、max。比如在设计边距：

.pd-mini {
  padding: 5px;
}

.pd-small {
  padding: 10px;
}

.pd-medium {
  padding: 15px;
}

.pd-large {
  padding: 20px;
}

.pd-max {
  padding: 25px;
}

颜色设计

参考 element ui，将颜色分为六类：default，info，primary，success，warning，danger。在此基础之上，通过颜色加深或减淡派生出其它辅助颜色。

$default: #303133;
$info: #909399;
$primary: #409eff;
$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;

// darken 加深
$default-darken: darken($default, 50%);
$info-darken: darken($info, 50%);
$primary-darken: darken($primary, 50%);
$success-darken: darken($success, 50%);
$warning-darken: darken($warning, 50%);
$danger-darken: darken($danger, 50%);

// lighten 减淡
$default-lighten: lighten($default, 50%);
$info-lighten: lighten($info, 50%);
$primary-lighten: lighten($primary, 50%);
$success-lighten: lighten($success, 50%);
$warning-lighten: lighten($warning, 50%);
$danger-lighten: lighten($danger, 50%);