html - 是否可以组合通用样式并删除重复

Question

这是简化版的html

<div id="id1"></div>
<div id="id2"></div>

这是我的 CSS。

#id1 {
    display: -ms-flexbox;
    -ms-flex-direction: row;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

#id2 {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

两种样式之间的唯一区别是 -ms-flex-direction 是行还是列。所有其他 3 个属性相同。有没有办法将两者结合起来，以免重复相同的代码？

Answer 1

在这种情况下，您可以将通用样式应用于两个 div，然后使用您的 ID 进行区分(顺便说一句，类更好)

div {
    display: -ms-flexbox;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

#id1 {
    -ms-flex-direction: row;
}

#id2 {
    -ms-flex-direction: column;
}

---

这样更好

HTML

<div class="flexbox row"></div>
<div class="flexbox column"></div>

CSS

.flexbox {
    display: -ms-flexbox;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

.flexbox.row{
    -ms-flex-direction: row;
}

.flexbox.column {
    -ms-flex-direction: column;
}