rstacruz / css-condense

[unsupported] A CSS compressor that shows no mercy
205 stars 4 forks source link

Add option to change order of media queries #13

Open tatemz opened 8 years ago

tatemz commented 8 years ago

I use mobile-up responsive styling, therefore, when I have two media queries while using MQ condensing, I get the larger media query higher up within the sheet and the smaller one, further down.

I use my MQs by specifying min-widths.

This means that my larger styles will override any styles that are wrapped within a smaller MQ.

Would be great if there was a way to add an option to change the order of MQs (ASC or DESC or "appearance order").

Obviously, this sounds much simpler than it really is considering there are thousands of combinations of MQs, but at least this can start the discussion.

tatemz commented 8 years ago

One way to solve this problem is to stick some arbitrary CSS for each MQ at the bottom of the sheet in the order that is needed. CSS-Condense will order them in order of last appearance.

// All of your unordered and custom MQs go before this line
@media screen and (min-width: 40em) { html { border: 0; } }
@media screen and (min-width: 60em) { html { border: 0; } }
@media screen and (min-width: 80em) { html { border: 0; } }