Opinion: Can we improve the efficiency of comma separated multiple selector targeting

[Historical Forums User]

Can we improve the performance of CSS by changing the way in which we’d target multiple selectors?

Example: Say we have a few tags nested inside a class which we want to have share certain properties.

.someClass h2, .someClass p, .someClass .subClass { margin: 0 0 1em; }

Rather than writing the .someClass part multiple times and bloating our code, wouldn’t it be easier to simply state .someclass [h2, p, .subClass] { margin: 0 0 1em; } or similar?

Any thoughts? I’m just trying to fill up a slow morning…

[joshuanhibbert]

I read something about that a while back. It’s possible that they may be working on that for the next major update.

[Senff]

<< Rather than writing the .someClass part multiple times and bloating our code, wouldn't it be easier to simply state .someclass [h2, p, .subClass] { margin: 0 0 1em; } or similar? >>

I can’t remember where I read this, but this type of format was already addressed by someone/some tool. SASS? Less? Can’t recall at the moment, but indeed it would be nice if this would be included in the CSS format.

[Paulie_D]

SASS/Compass will enable you to DEVELOP with that sort of syntax but it will still compile it into standard CSS and that’s what the browser reads. (AFAIK)

CSS variables are on their way which will help shrink CSS files but until then…..

[Senff]

@Paulie_D: Correct, of course! But I always see SASS as “something that will, eventually, be possible in CSS”. Maybe too hopeful or wishful thinking, but still!

For the record, the SASS syntax would be:

.someclass {
h2, p, .subclass {
margin:10px;
}
}

And after compilation it would be:

.someclass h2, .someclass p, .someclass .subclass {
margin: 10px;
}

But, in a few years from now that first piece of code may be enough in standard CSS.

[Paulie_D]

I like

.someclass {
h2, p, .subclass {
margin:$margin;
}
}

even better :)

[TheDoc]

The second I read the problem I was hoping I wouldn’t have to scroll far before somebody mentioned SASS/SCSS.

[Senff]

@TheDoc: because…..? :)

[TheDoc]

BECAUSE IT’S SO AWESOME! :)

[Senff]

Doh. I thought you meant it in a way of “I was hoping that the first mention of SASS would be very, very late in the discussion because it is not relevant“. Or maybe you just forgot to add “n’t” after “would“. Eh.

;)

[TheDoc]

Fixed. haha

[Senff]

Well that clears it up! Ha

[joshuanhibbert]

I found what I had earlier read: http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/

Pretty awesome if that takes off across all browsers!

[Senff]

@joshuanhibbert: that’s exactly the article what I was referring to in my earlier post!

[Dhanishta]

I have read about that previously. I think It’s possible that they will work to modify and it is possible to improve the efficiency of comma separated multiple selectors.

[Author]

Posts