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中使用mixin时问题变得越来越成问题（因为它很容易添加），但真正需要的是CSS中的mixins（我为此赢了＃ 39;不要屏住呼吸！）。也就是说，我注意到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%;
  }
}

如果你曾经看过生成的引导程序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
  }
}

使用@media查询时重复数据删除CSS规则

1 个答案: