[分享]css两个样式抽出公共部分

在使用CSS样式时，我们常常会遇到重复的代码，这无疑增加了代码量，而且也不利于维护。此时我们可以通过抽出公共部分来解决这个问题。 .box1 { width: 200px; height: 200px...

在使用CSS样式时，我们常常会遇到重复的代码，这无疑增加了代码量，而且也不利于维护。此时我们可以通过抽出公共部分来解决这个问题。

 .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        margin: 10px;
        background-color: #f1f1f1;
    }

    .box2 {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 10px;
        background-color: #f1f1f1;
    } 

以上是两个不同的样式，但是有很多相同的地方，如宽度、高度、边框、边距和背景颜色等。我们可以将这些公共的样式放在一个单独的样式中。

 .common-style {
        border: 1px solid #ccc;
        margin: 10px;
        background-color: #f1f1f1;
    }

    .box1 {
        width: 200px;
        height: 200px;
    }

    .box2 {
        width: 300px;
        height: 300px;
    } 

这样我们就把公共的样式抽了出来放在了一个单独的样式中，使得代码更加简洁和易于维护。