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.
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
Hmm, interesting reading @imaginekitty, apparently for small web sites this would not drastically affect performance but short selectors would be best practice.
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.