Question

I’ve been trying to get my own opinion about this issue but could not, so decided to ask.

While it seems to be well-known that the id in html is created to represent the unique element on the page, my experience is that the amount of unique elements on the page is normally quite big, especially in the custom forms. Moreover a lot of unique elements on the page are nested.

Let’s take just a simple structure like this:

#content
  form#search-filters
     #datepicker
  #search-results

When it comes to styling this peace of code you have in general two approaches (I am using scss and so are the examples):

1. Organize it hierarchically, e.g.

   #content {
     columns(8, 12);
     #search-filters {
        @include search-filters;
         etc.
   

2. Go with the plain declarations

   #content {
     columns(8, 12);
   }
   #search-fiters {
     @include search-filters;
   

And from my opinion it is damn cooler to have it in the first way, while it’s somehow against all the logic.

The question stays even worth with the contents of that #search-filters block, given as the example above. Let’s say you’ve used some Rails scaffolding which generated the id’s for each element of the form hosting the filters, and you want to refer to that id’s to provide the styling as well.
You know the the element is unique and that it will be unique in any form which extends the search-filters mixin. So you want it to have the id.
But you have to give it a class to make it logically consistent.

What is your opinion about this issue?

P.S. I’ve tried to read the spec about whether there are some performance difference in these two cases, but it doesn’t say anything:
http://www.w3.org/TR/css3-selectors/#class-html

Answer 1

You generally want to have id and class selectors that are not nested, because this gives you the best rendering performance. You can read this in great details at Googles Optimize browser rendering article.

In addition having no nested CSS selectors lowers the specificity and allows you to override it for specific cases more easily.

For simple sites that have a manageable amount of style this may not matter, especially if you also handle the other speed aspects right, like put styles before scripts. In such cases I would prefer the nested style for better readability.