[分享]css两个类名同规则

在 CSS 的开发中，经常会出现两个不同的类名，但是它们使用的 CSS 规则是相同的。这种情况下，如果直接在两个类名中都写上相同的 CSS 规则，那么就会造成代码冗余和维护成本增加的问题。所以，有没有...

在 CSS 的开发中，经常会出现两个不同的类名，但是它们使用的 CSS 规则是相同的。这种情况下，如果直接在两个类名中都写上相同的 CSS 规则，那么就会造成代码冗余和维护成本增加的问题。所以，有没有更好的解决方法呢？

当遇到两个类名使用相同 CSS 规则的情况时，我们可以将这些规则抽象到一个公共类中。这个公共类可以仅仅包含这些规则，而完全没有其他样式信息。

.common-rule {
  font-size: 14px;
  color: #333;
} 

当需要使用这些规则的元素添加类名时，可以使用公共类名和自身的类名组合：

<div class="common-rule page-title"></div>
<div class="common-rule text"></div> 

这样，我们就可以减少 CSS 冗余，更好地维护代码，同时也提高了 CSS 文件的加载速度。这种方式也被称为 CSS 模块化开发。