Re: CSS Hierarchies + @media queries

On Wed, Feb 29, 2012 at 5:01 PM, Sylvain Galineau
<sylvaing@microsoft.com> wrote:
> [L. David Baron:]
>> On Wednesday 2012-02-29 15:42 -0800, Chris Eppstein wrote:
>> > I was reading through http://dev.w3.org/csswg/css3-hierarchies/ and
>> > noticed that there was no provision for nesting an @media directive
>> > inside a hierarchical selector context.
>> >
>> > In Sass we let @media be nested in any selector and then "bubble" that
>> > @media query to the top level.
>> >
>> > For example:
>> >
>> > .context {
>> >   & .module {
>> >     float: left;
>> >     width: 50%;
>> >     @media all and (max-device-width: 500px) {
>> >       float: none;
>> >       width: auto;
>> >     }
>> >   }
>> >   & p {
>> >     color: #333;
>> >   }
>> > }
>>
>> Just because we could have another way to write something doesn't mean we
>> should.  We risk turning the language into perl, i.e., into a language
>> where there are ten ways to express the same thing and thus nobody can
>> read what anybody else writes.
>>
>> I think it's a lot of extra work to implement and it doesn't look like it
>> adds much value.
>>
> I agree with both these points.

I disagreed with this kind of change when I thought of it just in
terms of today's selectors.  In other words, the following:

foo {
  prop: val;
  @media all and (max-device-width: 500px) {
    prop: val;
  }
}

...isn't much of a win over just moving your @media to the top-level
and repeating your selector:

foo {
  prop: val;
}
@media all and (max-device-width: 500px) {
  foo {
    prop: val;
  }
}

But when you put Hierarchies into the mix, and realize that, based on
experience with SASS, developers like writing sheets with lots of
nesting, the difference between embedding a conditional and moving it
out to the top level becomes *much* greater. The "normal" and
conditional code are separated by a much greater amount, and you have
to either decompile the nesting into a normal selector inside the
conditional or repeat all the nesting again inside of it.

~TJ

Received on Thursday, 1 March 2012 01:12:33 UTC