Search code examples
csscss-selectorssasserbcss-specificity

Is it error-prone to use ID-attribute selectors (not #id) on body elements to namespace CSS files?

I'm using Sass to compile my SCSS stylesheets into a single assembled.css to reduce HTTP requests. To namespace individual pages for styling, I wrap each page-specific CSS file in an ID selector for that page's <body> element - for example:

body#support {

    .introduction {
        @extend %dropcap;
    }

}

In nanoc (using ERB), I have a helper that assigns each page's body a dash-separated unique ID based on the HTML folder structure, so the root pages will be #support or #products, while their sub-pages would have an ID like `#products-giantspacelaser'.

I want to make a set of SCSS rules that only apply to these 'products' sub-pages (not including the root-level #products page itself). Is there anything I should look out for regarding specificity if I use an attribute selector instead of an ID for this, as follows?

body[id^="products-"] {

    .introduction {
        @extend %dropcap;
    }

}

I really don't want to use !important, but I do want to ensure that these page-specific rules take precedent over styles set in the '_base.scss' partial that precedes them in the @import order. Seeing as I have full control over the HTML structure, I could also theoretically use Erb in the Sass files to substitute in a comma-separated list of IDs like so:

body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {

    .introduction {
        @extend %dropcap;
    }

}

- but that seems quite inelegant. Thanks in advance.

EDIT:

I've written my other styles in a really cascade-reliant way:

  1. Normalise CSS
  2. HTML5 Boilerplate's & my own sensible house rules
  3. CSS Libraries (in this case Bourbon & Neat)
  4. A "_source.scss" which in turn imports its own mixins & placeholder selectors.
  5. A "_base.scss" which styles the default layout framework of every page.
  6. A series of .scss files for each page's individual content styling - and, I hoped, overrides of base.scss layout decisions when necessary (if the page needs to take a serious departure from the norm).

Either way, these individual page stylesheets would need to definitely have a higher specificity than earlier defaults, as they were written for a specific purpose & page. I'm intentionally not using any ID selectors except for this one specific purpose - namespaceing page stylesheets.

Using, say 

.services .sharktraining .introduction .disarmingJoke {}  --0,0,4,0

in "_base.scss" would surpass 

body[id^="products-"] .disarmingJoke {}                   --0,0,2,1

in a further-down-the-cascade "products.scss", wouldn't it? (N.B. I know needing to use four classes is awful practice, I just don't want to worry about something slipping through the namespace).

I suppose there's another - really dirty - option: to repeat the body[id^="products-"] selector many times, to simply outnumber even the most specific class-strength rule.

Solution

  • It's going to have to depend on how you've written your other styles and whether or not they should take precedence (see: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).

    If you match the selector exactly but prefix one of them with your body selector, the prefixed one will be specific enough to take precedence no matter what (even if the order was reversed):

    body[id^="products-"] .widget {
    color: green;
}

.widget {
    color: red;
}

    The .widget will be green because the first selector is more specific than the second.

    The only problem with using attribute selectors over ids is if you care about IE6. If that's a concern for you, the IE7 JS library by Dean Edwards can help you out: http://code.google.com/p/ie7-js/

    If changing how the page information is attached to the body element is an option, my recommendation would be to have the parent directory be an id and the child pages be classes:

    <body id="products" class="giantspacelaser" />

    This way you can retain the specificity of the id:

    // excludes the body#products page, which wouldn't have a class set at all
body[class]#products { 
    // styling here
}