在类和媒体查询中去重 CSS 规则答案

【问题标题】：Deduplicate CSS rule in class and media query在类和媒体查询中去重 CSS 规则
【发布时间】：2016-05-29 10:28:50
【问题描述】：

我目前有一个 CSS，其规则在 .small 和 #a 的媒体查询中都是重复的，因为当浏览器宽度小于 600 像素以及单击按钮时，我想要相同的行为。

在我的真实案例中，规则很长，我想避免重复它们。 如何对这样的 CSS 进行重复数据删除？

$('#b').click(function(){ $('#a').addClass('small'); });

#a { background-color: green; }
.small { background-color: yellow !important; /* many other rules */ }

@media (max-width: 600px) { 
    #a { background-color: yellow !important; /* many other rules */ }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">Hello</div>
<input id="b" type="button" value="Change" />

【问题讨论】：

您应该尽量避免使用样式 ID，并且在大多数情况下，只使用样式类。此外，!important 的使用是草率的，只是表示样式表没有逻辑编写。您最好的选择可能是检查并重新制作整个样式表。
@JROB 感谢您的提示，但我看不出将<div id="a"> 替换为<div class="a"> 和#a { ... } 替换为.a { ... } 会改变规则重复问题的任何内容...
@JROB 你能解释一下你的想法是为了解决这里的问题吗？

标签： css media-queries

【解决方案1】：

我认为在纯 CSS 中没有办法做到这一点，这是您可以使用预编译器（例如 SASS）解决的问题之一，您可以使用变量或 mixins 在任何地方注入 CSS 规则

【讨论】：

谢谢，但我确实想用纯 CSS 实现这一点，没有预编译器。

【解决方案2】：

我能想到 Javascript 解决您的问题。

window.onresize = function(event){
 if(window.innerWidth < 600px){
  // add the class to the element
 }else{
 // remove the class
 }
}

我认为如果不使用预编译器，您无法以任何其他方式实现您想要的。

【讨论】：

【解决方案3】：

您必须使用 CSS 预处理器来执行此操作。

否则，您必须使用 jQuery 来根据视口宽度切换其他一些类，或者也将 .small 样式分配给 #a，然后在不需要时进行媒体查询以撤消这一切看起来像那样。

【讨论】：

有趣，你能精确一下你的第二个解决方案吗？