如何将多个CSS类合并为单个类名应用于容器？

说明：发布此问题时我对CSS的正确用法并不了解，但我不会删除该问题，希望我的这份无知能帮助他人走上正确的道路。

我希望仅使用一个类名，就为单个CSS容器应用多个类样式。例如，我可能想要为一个div标签应用多个常见的w3类，写法如下：

<DIV CLASS="w3-margin w3-padding w3-green">

我想将"w3-margin w3-padding w3-green"合并为一个类名，比如my-typical-classes，这样我就可以这样写：

<DIV CLASS="my-typical-classes">

请问该如何实现？

方法一：纯CSS手动合并样式 #

直接在你的CSS文件中创建自定义类，将目标类的所有样式属性复制进去：

.my-typical-classes {
  /* 对应w3-margin的样式 */
  margin: 16px !important;
  /* 对应w3-padding的样式 */
  padding: 8px 16px !important;
  /* 对应w3-green的样式 */
  color: #fff !important;
  background-color: #4CAF50 !important;
}

使用时只需添加这个自定义类即可：

<div class="my-typical-classes"></div>

注意：要确保你的自定义CSS文件在W3CSS的样式文件之后引入，避免样式被覆盖。

方法二：使用CSS预处理器（如Sass/Less）继承样式 #

如果使用Sass这类预处理器，可以通过@extend指令直接继承已有类的样式，无需手动复制代码，维护更高效：

.my-typical-classes {
  @extend .w3-margin;
  @extend .w3-padding;
  @extend .w3-green;
}

编译后的CSS会自动将这三个类的样式合并到my-typical-classes中，后续原W3类样式更新时，自定义类也会同步生效。

内容的提问来源于stack exchange，提问作者Chris Nadovich