一、定义多个class

在CSS中，可以为同一元素定义多个class，以实现不同样式的复用。

<div class="box red"></div>

.box {
  width: 100px;
  height: 100px;
}
.red {
  background-color: red;
}

上述代码中，通过给div元素同时添加box和red两个class，实现了宽高为100px且背景为红色的效果。其中.box为通用样式类，.red为特定样式类。

二、使用组合选择器

除了定义多个class外，还可以使用组合选择器来实现多个class的复用。

<div class="box"></div>
<div class="box green"></div>

.box {
  width: 100px;
  height: 100px;
}
.green.box {
  background-color: green;
}

上述代码中，通过使用组合选择器.green.box，仅对同时拥有.green和.box两个class的div元素加上背景色为绿色的样式。

三、使用属性选择器

属性选择器也可以实现多个class的复用，比如通过[class*="box"]来选择所有包含box的class。

<div class="box"></div>
<div class="container box"></div>

[class*="box"] {
  width: 100px;
  height: 100px;
}
.container [class*="box"] {
  background-color: gray;
}

上述代码中，通过[class*="box"]来选择所有包含box的class，对这些元素设置宽高为100px。另外，通过.container [class*="box"]来选择所有在.container下的元素中含有box的class，对这些元素设置背景色为灰色。

四、使用伪类

在某些场景下，可以使用伪类来实现多个class的复用，比如:hover来实现鼠标悬浮效果。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box:hover {
  background-color: green;
}

上述代码中，当鼠标悬浮在.box元素上时，其背景色会变为绿色。

五、使用CSS预处理器

在大型项目中，为了避免CSS的复杂度，可以使用CSS预处理器来简化编写。

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  &.green {
    background-color: green;
  }
}

上述代码中，使用Sass预处理器中的&和.符号来实现多个class的复用。当.box元素同时拥有.green类时，其背景色会变为绿色。