css - 如何将两个css类优化为一个

Question

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

我有这个代码：

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

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

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

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

标签： cssreactjsoptimizationbuildfrontend

Answer 1

You can add both classes to your HTML element or combine the margins into one class like this:

.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>

It all depends if you want to keep the classes separate for other areas of your code, or if you will never need those margins in separate classes.