CSS 的那些事：减少代码重复

2023-11-09 05:59:57

减少 CSS 中的代码重复：保持代码井然有序和可维护性的秘诀

在前端开发中，编写简洁、可维护的 CSS 代码至关重要。然而，重复的代码块却会阻碍这些目标的实现，造成代码的可读性和可维护性下降。掌握减少 CSS 代码重复的技巧是应对这一挑战的关键。

变量：共享样式的秘诀

变量允许我们提取重复使用的 CSS 值，并将其存储在一个便捷的名称中。例如，假设我们有一个名为“main”的类，它在多个元素中被多次使用。我们可以声明一个变量 $main-color，并将它的值设置为“#000”。现在，我们可以使用变量代替重复的颜色值：

.main {
  color: $main-color;
}

这样一来，如果我们想更改“main”类的颜色，只需修改 $main-color 变量即可，而不是手动更新每个 CSS 规则。

百分比单位：跨设备保持一致性

百分比单位是保持不同设备上元素相对大小的关键。例如，如果我们希望一个元素始终是其父元素宽度的 50%，我们可以使用以下 CSS：

.element {
  width: 50%;
}

无论父元素的宽度如何变化，元素的宽度始终保持 50%。

em 和 rem：控制字体大小

em 和 rem 单位对于在不同设备上保持字体大小的相对性非常有用。em 相对于父元素的字体大小，而 rem 相对于根元素（HTML 元素）的字体大小。例如，如果我们希望一个元素的字体大小始终是其父元素的 1.5 倍，我们可以使用：

.element {
  font-size: 1.5em;
}

@extend：共享样式，减少冗余

@extend 规则允许我们在不同的 CSS 类之间共享样式。例如，如果我们有一个名为“button”的类，还有一个名为“primary-button”的类，并且我们希望“primary-button”类继承“button”类的样式，我们可以使用：

.primary-button {
  @extend .button;
  color: #fff;
  background-color: #000;
}

现在，“primary-button”类将继承“button”类的所有样式，并添加自己的颜色和背景颜色样式。

预处理器：高级功能，可提高可维护性

Sass、Less 和 Stylus 等 CSS 预处理器提供了高级功能，例如变量、函数和 mixin，可以进一步减少代码重复和提高代码可维护性。例如，在 Sass 中，我们可以使用变量和 mixin 创建一个可重用的按钮样式：

$button-color: #000;

@mixin button {
  color: $button-color;
  background-color: #fff;
  border: 1px solid $button-color;
  padding: 10px;
}

.button {
  @include button;
}

.primary-button {
  @include button;
  color: #fff;
  background-color: #000;
}