In its current form, your question is mainly based on opinions.
It would probably be better to ask if anyone knows what the reasons for Bootstrap's approach were, although this question is also primarily based on opinions. But your real chances of getting an answer are much higher than trying to contact Bootstrap authors.
And that’s why I will give you my own considerations , based on a practical approach: I need to do something, I need to quickly, and it must be ready for production.
Regarding the order of @media queries , the only argument for using mobile-first over desktop-first is better for people who have no idea what this means. Therefore, you can always answer your clients / boss when they ask:
- Is this the "mobile first"?
- Of course, we use the latest technology ...
But in the real world, as long as your @media requests apply the correct code to each response interval, you do-it- right .
The only thing you should worry about, in that order, where possible:
- writing a valid code
- cross device recording / cross browser code
- writing supported and easy to read code (for you and other developers)
- write less code for the same functionality.
As for using em vs px , this is Bootstrap's second attempt at dumping px for em in @media requests. As far as I know, the first attempt was dropped due to lack of support and differences in calculating em for a significant share of mobile browsers at that time. However, a quote is needed here, and I can’t find anything in this discussion, which I remember reading ~ 2 years ago. I'm not even sure if it was around v3 or the prototype v4 that was released at that time. I think it was v4 . In any case, if they decide to use em in v4, em is probably safe to use now.
Edit: Convergence in v4 beta - released just 9 days ago, it looks like you quoted a scss file, later parsed into px requests into the final dist code . Therefore, I assume that the discussion that I remember is still relevant today. In conclusion, I would suggest using em in your CSS @media queries.
The last, but no less important, part of the screen should be taken into account only when you need to take care of how your page looks and how it looks on the screen.
If you need to take care of this, depending on the differences between them, you should estimate the amount of code that you would redefine if all your existing ( screen ) code was applied to print and wrote down all print code from scratch.
If it’s faster at first, don’t add screen to your requests and put @media print . If the latter is faster, wrap the existing code inside @media screen , add screen to your existing requests, like Bootstrap, and put your print code inside another @media print , so it does not affect screen .
Note. . I prefer the first method, as this is a practical approach, easy to test, and usually this leads to a decrease in the amount of code written.