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;
}

Answer 2

当元素之间共享属性时，您应该使用一个类来定位它们。ID 应仅作为唯一标识符位于单个元素上。以下是实现类的方法：

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

CSS：

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

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

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

您还可以使用空格将多个类分配给一个元素。所以这：

<div id="id1" class="same different"></div>
<div id="id2" class="same not-different"></div>
<div id="id3" class="same not-different"></div>

CSS：

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

.different {
    background: green;
}

.not-different {
    background: red;
}

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

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

这将允许您使用类链接来定位多个项目。