I’ve been spending some time refactoring the CSS code on TandemExchange, and have been using the fantastic support for media queries in LESS CSS, to create very concise and adaptive style rules.
My general rule at the moment is that there are roughly three form factors to worry about (plus hidpi-style displays, though I haven’t tackled that yet) which are easy to define using LESS CSS’s media queries as variables terminology:
|
1
2
3
|
@phone: ~"only screen and (max-width: 480px)";
@tablet: ~"only screen and (max-width: 800px)";
@desktop: ~"only screen and (min-width: 801px)";
|
Which means in plain English that every screen up to 480px applies the @phone rule, up to 800px applies the @tablet rule, and anything more than 800px uses the @desktop rule.
Then, when defining the CSS class rules, you can just do neat things like this:
|
1
2
3
4
5
6
7
|
.someClass {
color: #101010;
@media @phone {
color: #ffffff;
}
}
|
Though, I’m not sure why you’d ever want something to go bright red. For many positioning issues, and especially side-by-side element to inline layouts, this is a huge boon to maintaining a tight set of CSS rules.