2

Why do so many people use classes for elements for which there will never be more than one instance of? e.g. all the typical layout elements, headers, footers, sidebars etc.

Besides the restriction ID's have of having to uniquely identify an element on a page, are they not better than classes in all ways e.g. are faster to render, javascript, higher specificity etc? I feel like I must be missing something but I can't figure it out.

Michelle
  • 2,155
  • 4
  • 26
  • 42
  • 1
    http://stackoverflow.com/questions/84378/div-class-vs-id – Jawad Dec 13 '11 at 15:54
  • http://stackoverflow.com/questions/5171450/which-method-is-better-css-classes-or-ids – Jawad Dec 13 '11 at 15:55
  • http://www.readwriteweb.com/hack/2010/08/css-tip-class-or-id.php – Jawad Dec 13 '11 at 15:56
  • and this: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html – Scott Simpson Dec 13 '11 at 15:59
  • 3
    @Jawad I think asking which is actually faster is still a valid question. The fist link is not the same at all, the second link doesn't have any relevant answers, the third and forth are specificity not actual speed. That being said, I doubt there is a difference in speed between the two. – Andrew Dec 13 '11 at 16:03
  • Thanks for these links, I understand the arguments. I'm just trying to figure out why so many folks don't seem to follow the rules. If chrome elements should use ID, why do so many insist on using classes? – Michelle Dec 13 '11 at 16:10
  • @Jawad Is using id selectors faster than class selectors in style sheets. – Andrew Dec 13 '11 at 16:11
  • @Michell you are mistaking javascript optimization for CSS ones. Its faster **in javascript** to use IDs as selectors. There is no difference in CSS. – Andrew Dec 13 '11 at 16:13
  • @Andrew i'm not mistaking it. I know selectors are traversed right to left and so obviously using descendant selector is not optimal etc but there seems to be plenty of tests showing that browsers can render an element quicker when using an ID albeit extremely small). – Michelle Dec 13 '11 at 16:21

2 Answers2

2

because classes represent types of elements and id's should represent individual elements, so if you are using an element say a type of column header or horizontal rule in more than one place, or could imagine using that element on more than one page, use a class, because they aren't the same element.

they aren't faster to render or better, it is just a better paradigm. DRY.

Grady Player
  • 14,399
  • 2
  • 48
  • 76
  • 2
    CSS is unique to each page. If every page is using **one** instance of the header, then there is nothing wrong with assigning an `id` to the header. As far as the CSS is concerned, for a particular rendered page, none of the other pages exist. – Sparky Dec 13 '11 at 16:12
2

It depends more on the complexity of the call then on id vs. selector, see google docs.

As the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed. It then matches elements to styles specified in various stylesheets, according to the standard CSS cascade, inheritance, and ordering rules. In Mozilla's implementation (and probably others as well), for each element, the CSS engine searches through style rules to find a match. The engine evaluates each rule from right to left, starting from the rightmost selector (called the "key") and moving through each selector until it finds a match or discards the rule. (The "selector" is the document element to which the rule should apply.)

So it doesn't need to search the DOM to apply the style, the reverse actually happens. As the DOM is being build the style sheets are being searched for matches. If the above is true, a class will the same rendering speed as an id.

Andrew
  • 13,757
  • 13
  • 66
  • 84