如何将两个css类优化为一个答案

【问题标题】：How to optimize two css classes into one如何将两个css类优化为一个
【发布时间】：2021-09-19 23:19:48
【问题描述】：

我有一个用 react 制作的项目，我想优化 css。

我有这个代码：

.class-1 {
    margin-top: 15px;
}

.class-2 {
    margin-bottom: 15px;
}

在构建过程中是否有可能进行这样的优化？

.class-3 {
    margin: 15px 0 15px 0;
}

【问题讨论】：

margin:15px 0; 更短 :) 但是，你需要两个类都保持这样吗？如果是，这两个类都可以附加到 HTML 中的单个元素，而不是第三个。但是，如果您查看引导程序类，则每个可能的方向以及水平、垂直和 4 个方向都有一个 :)
取决于您想要实现的目标，如果您需要 margin-top 但没有 margin-bottom 或其他方式您不能这样做，但是如果您始终使用这两个类，您可以使用更短的版本margin: 15px 0;
是的，但我的意思是如果有一种方法可以优化 CSS 结合 .class-1 和 .class-2 并且输出类似于 .class-3 .class-1 和 .class- 2 将被清除，因为 .class-3 与 .class-1 和 class-2 的作用相同。通过这种方式，我只为 HTML 中的元素使用了一个类，因此网络速度更快。

标签： css reactjs optimization build frontend

【解决方案1】：

您可以将这两个类添加到您的 HTML 元素或将边距合并为一个类，如下所示：

.class1 {
  margin-top: 15px;
  background-color: skyblue;
}

.class2 {
  margin-bottom: 15px;
}

.class3 {
  margin: 15px 0;
  background-color: red;
}

<div class='class1 class2'>My element with 2 classes</div>

<div class='class3'>My element with 1 class</div>

这完全取决于您是否希望将类与代码的其他区域分开，或者您是否永远不需要单独的类中的这些边距。

【讨论】：