使用公共子类编写CSS类的更好方法

假设这是我的HTML：

<div class="example">
  <span></span>
</div>

<div class="test">
  <span></span>
</div>

<div class="foo">
  <span></span>
</div>

<div class="blah">
  <span></span>
</div>

如果这只是一条规则的话，这是一种体面的做法，但事实并非如此；我的代码最终如下所示：

.example span, .test span, .blah span {
}

.example span:hover, .test span:hover, .blah span:hover {
}

.example span:before, .test span:before, .blah span:before,
.example span:after, .test span:after, .blah span:after {
}

---

这很快就会变得乏味。有什么更好的方法可以做到这一点呢？

CSS很乏味。使用SASS或更少的代码来编译CSS，这样可以省去一些麻烦

在SCSS（SASS）中：

了解更多信息，请访问：

---

并且

您可以向div添加额外的类，并在声明中链接它们；假设您想要在div.blah中的span上添加.bold类，您可以这样做：

---

.blah.bold span{}

如果不检查，也可能很容易膨胀，但在您的情况下听起来很合适。

将跨度分类。或者在

.foo

中对span进行分类，然后

span:not（.foo span）

。

.example span, .test span, .blah span {
}

.example span:hover, .test span:hover, .blah span:hover {
}

.example span:before, .test span:before, .blah span:before,
.example span:after, .test span:after, .blah span:after {
}

.example,
.test,
.blah {
  span {
    &:hover {

    }
    &:before,
    &:after {

    }
  }
}