Compact Styling with media queries

Hi there,

maybe this has already discussed to death, but I couldn't find the discussion - so I'm bringing it up here again. (If there already was discussion about this, could you please point me towards it and the resolution you guys took away from it?)

Using standard css and media queries one has to either group all styles that should be active under one media query in one place, or repeat the media query all the time.

For example:

-- snip --
/* default styles */

@media $mobile {
	/* all styles for mobile  - really long */
}
@media $tablet {
	/* all styles for tablets - really long */
}
@media $desktop {
	/* styles for desktop - even longer */
}
-- snap --

This creates a maintenance nightmare as you cannot have the different styles of some element all in one place but instead they are pulled far apart making it much harder to change them safely.

Several workarounds exist:

* One can repeat the @media queries each time they are used, but that repeats the media queries, and they too are hard to read and not very semantic
* One can have some js that continuusly evaluates the media queries and sets a corresponding class somewhere in the document (body.mobile || body.tablet || body.desktop). This works, but is slow and means that styling cannot be  under the full control of the css engine.
* One can use a CSS-Preprocessor that has syntax to allow writing all styles in one place, but then on compile tears them apart and places them in their respective @media blocks.

Which begs the obvious idea - why can't media queries be named, and then that name referenced as part of a selector? That would easily allow keeping all styles (mobile, tablet, desktop) for an element together at one place while keeping full control in the css engine. I'm envisioning making the named media query something that can be selected using a pseudo selector or an attribute query.

For example:

-- snip --

@media(mobile) <mobile detection rules> {}

.some.rule {
    // css that applies everywhere
}
.some.rule::media(mobile) {
    // mobile specific css
}
// or
.some.rule[media(mobile)] {
    // mobile specific css
}
-- snap --

Of course the syntax does not matter at this point, neither does the specificum of selecting media queries via pseudo selectors or attribute queries, but the idea to have named media queries and be able to write selectors that reference them does.

What do you think? Is there some prior discussion that you could point me towards?

Regards,
Martin Häcker

Received on Tuesday, 14 October 2014 08:59:06 UTC