I currently have a CSS with rules which are duplicates in both .small and the media query for #a, because I want the same behaviour when browser width is smaller than 600px and when a button is clicked.
In my real case, the rules are very long, and I would like to avoid to duplicate them. How to deduplicate such a 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" />