Grow your CSS skills. Land your dream job.

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

  • # September 20, 2012 at 6:30 am

    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…

    # September 20, 2012 at 8:31 am

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

    # September 20, 2012 at 9:26 am

    Wellll. . . Browsers read selectors right to left, so I don’t know how that would work with a syntax like you’re suggesting. For example: Consider this selector string:

    html body p.article ul#left li.odd


    The browser would first find all elements with a class of odd, then search those for anyli‘s, see if any one of those has a parent that has an ID of left, and so forth, all the way to the first selector, in this case html. You can read more about that here:
    http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672

    http://www.vanseodesign.com/css/css-selector-performance/

    # September 20, 2012 at 11:40 am

    < < 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.

    # September 20, 2012 at 11:47 am

    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…..

    # September 20, 2012 at 12:08 pm

    @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.

    # September 20, 2012 at 12:16 pm

    I like

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

    even better :)

    # September 20, 2012 at 1:12 pm

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

    # September 20, 2012 at 1:36 pm

    @TheDoc: because…..? :)

    # September 20, 2012 at 1:44 pm

    BECAUSE IT’S SO AWESOME! :)

    # September 20, 2012 at 2:02 pm

    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.

    ;)

    # September 20, 2012 at 3:32 pm

    Fixed. haha

    # September 20, 2012 at 4:25 pm

    Well that clears it up! Ha

    # September 20, 2012 at 7:27 pm

    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!

    # September 20, 2012 at 9:50 pm

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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".