Media query orders can get mixed up #1
Description
Media queries are appended in the order they are found in the file.
This could cause an issue in the following scenario:
.selector-1 { color: blue; }
@media screen and (min-width: 40em) {
.selector-1 { color: red; }
}
.selector-2 { color: blue; }
@media screen and (min-width: 25em) {
.selector-2 { color: green; }
}
@media screen and (min-width: 40em) {
.selector-2 { color: red; }
}The desired output would be:
.selector-1 { color: blue; }
.selector-2 { color: blue; }
@media screen and (min-width: 25em) {
.selector-2 { color: green; }
}
@media screen and (min-width: 40em) {
.selector-1 { color: red; }
.selector-2 { color: red; }
}The actual output would be:
.selector-1 { color: blue; }
.selector-2 { color: blue; }
@media screen and (min-width: 40em) {
.selector-1 { color: red; }
.selector-2 { color: red; }
}
@media screen and (min-width: 25em) {
.selector-2 { color: green; }
}The ideal situation would be both selector to be red at sizes wider than 40em. View the demo here