If CSS Selectors are by #id, do you need to scope them?

Question

If I have a structure like this:

<div id="main">
  <div id="sidebar">
    <div id="tag-cloud"/>
  </div>
</div>

... what's best practice for css:

#main #sidebar #tag-cloud { ... }
#tag-cloud { ... }

Or if id='main' was instead class='main', would it be worse to scope? I'm just wondering, if you have ids, do you need to scope at all?

Answer 1

Typically, you shouldn't have ID collisions in your html document. So, from that perspective scoping on ID's is a waste of time.

However, if you incorrectly have multiple elements with the same id then you might need to use scoping. But this results in invalid html and might cause other undesirable consequences and therefore should be avoided.

Answer 2

IDs have to be unique in a document, unless you're for some reason sharing them across pages, where #something may a totally different thing in a different container on another page, I'd just use:

#tag-cloud { ... }

Answer 3

I don't think it makes much sense to scope ids, However I prefer to have all my other selectors scoped to an id.

Maybe you should ask your self if you need all the ids or if some should have classes or nothing at all. Less is More.

Answer 4

Depends. Most of the time, you could say:

#tag-cloud { ... }

is the best (performance-wise, see below). This:

#main #sidebar #tag-cloud { ... }

just does a lot of unnecessary checks that are bound to succeed.

Unless you want to do this:

#sidebar #tag-cloud { ... }
#not-sidebar #tag-cloud { ... }

in which case scoping defines a different look depending on where #tag-cloud is. Of course there can be only one #tag-cloud in your page, but your CSS could handle both cases anyway.

---

CSS checks are done from right to left. This:

#main #sidebar #tag-cloud { ... }

Evaluates to: "The element with ID tag-cloud that has a parent with ID sidebar that has a parent with ID main. If that's how your site looks anyway, that's just a whole lot of useless DOM traversal.

Not to speak of the fact that with over-specific, superfluous scoping the whole CSS must change in a lot of places if you modify your site structure, which somehow defies the purpose.

Answer 5

IDs should be unique, so scoping should be unnecessary. A good javascript engine will use these IDs as keys to quickly lookup an element by ID, so scoping will actually slow things down.

But, you could have an invalid document with multiple IDs, in which case scoping will ensure you aren't hitting multiple elements unexpectedly. But in this case you should really me fixing your IDs instead.

Answer 6

I always scope. You may only have the one tag-cloud on this page, but you may have a different tag-cloud on another area of your website, which requires a different style.

Personally, I refrain from ever using IDs in my CSS. They're restrictive and can cause problems if your static site is ever changed to a dynamic one where IDs are re-rendered (ie. ASP.NET).

Answer 7

You already said it yourself: ID's are unique. So, scopes only adds clutter. But if they were intentionally there for pure documentation purposes, I'd replace them by just indenting the rules.

E.g. instead of

#main {
    /**/
}

#main #sidebar {
    /**/
}

#main #sidebar #tag-cloud {
    /**/
}

do

#main {
    /**/
}

    #sidebar {
        /**/
    }

        #tag-cloud {
            /**/
        }

Answer 8

Best practice of id is to use as wrapper

<div id="main"><!--main wrapper-->
  <div id="section"><!--section wrapper-->
  <p>something</p> 
  </div>
  <div id="sidebar"><!--sidebar wrapper-->
    <div class="tag-cloud">
  </div>

</div>

its better your start with last Id

#sidebar #tag-cloud { ... }

AS per google page speed fire bug tool, which recommend to use less depth as css selector

Answer 9

No, you shouldn't scope id's because they must be unique per page. If you have multiple elements that use the same ID, your HTML will not validate and it will cause problems when trying to access the DOM via javascript.

For example if you had multiple Id's on the page:

var myElements = document.getElementById('myduplicateid')

Would return the first element it found that matched which may not be the desired result.

if you're having issues with coming up with id's for similiarly grouped objects, I recommend doing something like this (radio button example)

<input type = "radio" id = "my_radio:1" value = "1" name = "my_radio">
<input type = "radio" id = "my_radio:2" value = "2" name = "my_radio">

In your javascript, you would then do something like this:

var my radio = document.getElementById('my_radio:1')

Or of you're using jQuery, something like this:

var my radios = $('#my_radio\\:1') # Must escape colon with double slash since it's a special character in jQuery