css优化之提高代码拓展性

css优化系列文章

css优化系列： 通过“使用 CSS 变量”和“整合重复样式”来优化代码的可维护性。

---

---

使用css变量

将重复使用的颜色、间距值等等定义为变量，提高代码的可维护性。对于使用函数获取值的情况，也可以降低重复计算的次数。例如：

/** 跟节点里设置变量 **/
.chat-window {
  --cw-z-index: 1000;
  --cw-bg-gradient: linear-gradient(to bottom, #d6e4ff, #b0d7ff, #e0f7ff);
}
.chat-window__right-box {
  width: calc(100% - 150px);
}
/** 直接取变量值 **/
.chat-window__left-box--expand {
  width: 20px;
  height: 50px;
  min-height: 30px;
  color: var(--cw-primary-color);
  font-size: 12px;
  padding: 5px 0 0 2px;
  text-align: right;
  cursor: pointer;
}
/** 直接取变量值 --cw-bg-gradient的两次取值，但是只调用一次linear-gradient函数，即只在计算值时调用 **/
.chat-window__resize-handle {
  height: 100%;
  border-right: 3px solid; /* 设置为左边框 */
  border-image: var(--cw-bg-gradient) 1;
  cursor: ew-resize;
  z-index: var(--cw-z-index);
}

这种当主题的颜色改变时，只需要修改.chat-window中的–cw-bg-gradient位置即可，其他地方都会跟着修改，而不需要修改每一处应用了这个颜色的位置。

整合重复样式

对于样式有重复的，可以单独再拆分一个选择器。如：
对于两个可点击的box，除了状态不同时背景颜色会变之外，其余样式一样。则优化前和优化后示例代码如下：

/* 优化前 这时一旦box样式改的话 需要改两个地方*/
.b-item {
  border-radius: 0.5rem;
  color: rgb(83, 95, 119);
  background: #fff;
  width: 135px;
  padding: 5px 8px;
  cursor: pointer;
}
.b-item--active {
  border-radius: 0.5rem;
  color: #fff;
  background: linear-gradient(to right, #6882ffff, #a7c1ffff);
  width: 135px;
  padding: 5px 8px;
  cursor: pointer;
}
/* 优化后 抽出相同的部分 改只需要改一个地方*/
.b-item {
  border-radius: 0.5rem;
  color: rgb(83, 95, 119);
  background: #fff;
  width: 135px;
  padding: 5px 8px;
  cursor: pointer;
}
.b-item--active {
 color: #fff;
 background: linear-gradient(to right, #6882ffff, #a7c1ffff);
}

类似场景还有：收起与展开、按钮的活跃与非活跃等等。
也可以利用继承减少重复规则，比如如果某个父组件下面的子组件的样式有重复的，可以抽出来，放到父组件里，这样也可以减少重复规则，进而代码易读易拓展。

总结

此处是对css在代码层面的优化，至此css优化系列文章已经全部完成。真实开发中并不是使用到某一种场景，而是多个优化场景并用的。因此需要对这些常用优化很熟悉，才可以在开发场景中想起。
附另外两篇链接：

css优化之匹配优化

css优化之减少嵌套层级