Short vs long CSS targeting

HTML & CSS
1

Hi,

Whats best, to use short or long target identifiers?

Short

body{}
#container{}
#header{}

VS

Long

body{}
body #container{}
body #container #header{}

The reason for this question is because I decided to use SASS and I theres a feature that I like which is the option of nesting my elements, following the structure of my markup, something like…

body{
  #container{
    #header{}
  }
}

Which basically outputs long targeting.

How are you using SASS?

“Please despite the fact the I’m using IDs I could be using Class”.
Thanks a lot.

2

Here is an interesting read on the subject if speed is a concern:

I imagine the efficiency difference is minimal but more on topic I’m wondering if SASS causes some maddening specificity issues.

3

The simpler, the better.

The more specific you write a rule:

  • the worse become performance and speed as it’s more work for the engine to find a match.

  • the bigger the filesize of your stylesheet.

  • the less likely that you can reuse that CSS rule for other elements without modifying the code

  • the bigger the hassle in terms of inheritance and specifity, often leading people to use !important to overwrite a too overly specified CSS rule somewhere else in the stylesheet

4

Hmm, interesting reading @imaginekitty, apparently for small web sites this would not drastically affect performance but short selectors would be best practice.

Thanks a lot for your comments and for the link.

5

@kohoutek

Ok you are confirming that LESS is probably best (as long as you are targeting your tags correctly of course). Thanks a lot for your comments.

6

There may be times where you NEED the extra code in order to make a definition more specific than one elsewhere in the CSS in order to ensure that the right one gets applied. You should however only make things more specific when you need to. In almost all cases the short version should be specific enough.

7

Thanks a lot for your comments I will continue using the short notation and as you said a more specific when needed.

8

I asked this same question, and someone posted a link that explained the benefits of short selectors to me immediately - it was great. The link is: [URL=“http://www.css-101.org/descendant-selector/go_fetch_yourself.php”]http://www.css-101.org/descendant-selector/go_fetch_yourself.php.

The longer selectors helped me organize my stylesheet and I miss that benefit, but overall I definitely feel better about the shorter selectors.

9