css - 使用@media 查询时去重 CSS 规则

Question

我越来越注意到，我的样式表通常有重复的规则作为普通选择器以及在 @media ... {} 查询中，并生成相当多的 CSS 膨胀。

这是一个简单的用例，我看到弹出广告令人作呕的问题:

.big-red { 
  color:red;
  font-size: 3em;
  ... lots of other stuff 
}
.dynamic-uber-class { 
    color:green;
    font-size:2em;
}
@media only screen and (min-width: 48em) {
  .dynamic-uber-class { 
    color:red;
    font-size: 3em;
    ... lots of other .big-red duplicated stuff 
  }
}

我注意到当我在 less 或 scss 中使用 mixins 时问题变得越来越严重(因为它真的很容易添加)，但真正需要的是 CSS 中的 mixins(为此我不会屏住呼吸!)。也就是说，我注意到了CSS-Properties , 有一些支持和@apply没有支持。

有没有人偶然发现了一种仅 CSS 的方法来避免这种重复？

我知道使用一些 Javascript 我可以简单地添加/删除类，但我喜欢我的网站在禁用 javascript 的情况下正常工作(尽可能)。

编辑:对于那些难以理解问题的人，请从 bootstrap 的网格中举一个真实的例子:

.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
...
@media (min-width: 768px) {
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
}

如果您曾经看过 bootstrap 生成的 CSS，那么由于这个问题，它确实非常胖。

Answer 1

为什么不是这样的:

.uber-class, .dynamic-uber-class { 
  color:red;
  font-size: 3em;
  ... lots of other duplicated stuff
}
@media only screen and (min-width: 48em) {
  .dynamic-uber-class { 
    ... only unique styles
  }
}