I have been pondering this question for a while and was wondering what you all think. I know the theory behind selectors and dependency and so on, but was just curious if there is really any difference. If i have a DIV tag nammed "<div id="container"></div>" what would be the supperior way to do the CSS code structure? Which structure is best? : #container {} (least specific) div#container {} (medium specificity) body div#container {} (most specific) I realize that "body div#container {}" is the most exact, thus being the most accurate way to make sure that the DIV tag gets the CSS applied to it. But is there really a downside in being less specific, like using just "#container" ? Just looking for some opinions/reasons. Thanks.
You only want to resort to things such as body div#container{} when you want to specifically pin-point that element. You should not be using it on every element. It's a waste of kb for one in the css file, secondly it's un-needed. I only use it if a class or id is not being applied to a element, or if i want to specifically pinpoint it. It is also useful if you are dealing with extremly large sites. CSS is like sex - there is no right or wrong way to do it. There are rules - but they are very basic, the rest is all you!
Haha. Yeah very true. I assumed this was true. It made little to no sense to me to be so specific, and as you said it is just a waste of space.
It's useful when certain elements will not abide to a class or id, or when you have extremly large pages with thosands of classes/id's.
It's also important to know the specificity rules of CSS http://www.htmldog.com/guides/cssadvanced/specificity/ You'll find it easier once you know how specificity works.
Not true, they aren't equally specific. The top one has a specificity value of 100, the second, 101. the third, 102. However, in the above example, they would offer little benefit unless you were debugging or messing with styles, because as mentioned; IDs should be unique.