Question

What is the preferred method when dealing with choosing a class vs. an ID?

For instance, you can have a bunch of elements that might be styled identically and could all use the same class. However, for readability purposes, it’s sometimes nice to have a unique ID for each element instead.

Obviously you don’t want to go ridiculously overboard where every element has an ID. However, where do you guys draw the line and does using all IDs where you could be using classes slow things down noticeably? If so… when?

Answer 1

I use IDs for elements that have clear responsibility, Classes for element that have same presentations, for example:

HTML:

<div id='sport-news'>
    <article class='news'>...</article>
    <article class='news'>...</article>
</div>

CSS:

.news { /* global styles */ }
[id=sport-news] .news { /* specific styles */ }

JavaScript:

var sportNews = document.getElementById('sport-news') // faster
, news = sportNews.childNodes;

For me, [id] .class is more readable than .parent-class .child-class.