For those of you who still have to support older browsers, such as IE6-8, then PostCSS can help—we can use the postcss-mqwidth-to-class plugin to generate hardcoded class rules, based on the media queries we specify, such as this example:
@media (min-width: 1024px) and (max-width: 1298px) {
.bar { float: left; }
}If we compile it using this plugin, it will produce this result:
.min-width-1024px.max-width-1298px .bar { float: left; }Anyone spot the danger here? The code may be technically correct, but it suffers from some limitations which make it less attractive: a risk of high levels of CSS specificity, media types are ignored (such as screen or print); and JavaScript may be required if adding classes to the <body> or <html> tags.
Ultimately it is down to us to decide what we need to use, but we should always be mindful that our code doesn't introduce new issues if we have to support older browsers! In this instance, a better alternative...