系统样式升级的心得记录

       有时间复盘一下两年半的前端工作，主要做的是管理系统后台，一个大项目里面包含大大小小几个小系统；在这其中碰到过系统样式升级的需求，由于先前是各个同事负责的，刚开始改起来有点头痛，后面整改了一波，还是很好维护的。也算是主导的一个工作了，记录一下心得🤗

1. 规范类名命名

BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介。Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。

使用 BEM 命名规范可以很清晰的看出元素是干啥的，并且搭配起 LESS/SASS 预处理器编写 CSS，书写起来会简便不少。

// ❌ bad example
<div class="button primary" />
<div class="button danger" />
<div class="studentbox" />

// ✅ good example
<div class="button--primary" />
<div class="button--danger" />
<div class="student-box" />

<style lang="scss" scoped>
.button {
  color: #FFF;
  &--primary {
    background: #4685FF;
  }
  &--danger {
    background: #CA0C16;
  }
}
</style>

2. 善用变量
系统样式升级，有一部分是主题色的更改，刚开始写的时候大家都没有这个意识，直接将色值写在每个文件里面，导致改起来的时候要一个一个翻着改，很头痛。（全局搜索🔍可以快一点，但是有可能有些地方要换颜色）所以可以善用变量，存储使用次数多的色值等，更容易地管理CSS代码。

$--color-primary: #0654E9;
$--color-success: #67C239;
$--color-warning: #FB8139;
$--color-danger: #FB3A39;
$--color-default: #D9D9D9;

$mainBg: #22325C;
$subMenuBg: #1A2645;

$marginGap: 10px;