classes are for styling
ids are for content
In my ideal codebase them's the rules. Simple as that.
Refactoring doesn't need to be hard
The main goal of this division is to make sure that refactoring one concern (content, style, or interactivity) won't create bugs in the others.
classes are easily reusable for styling, which is great for consistency. Mix
classes on an element to get things looking just right in a scalable fashion.
ids are actually part of the content, in that they can appear in the URL. They will be linked to, and should convey a sense of the relevant part of the document.
Why we need rules
var title = $('.section-title');
The logic is simple — go find the thing, save the thing for later. And how should I look for the thing? Well, I've already given the thing a class name, so I can just use that. It's how they do it in the docs, and what you'll find in most jQuery codebases.
Two illusive assumptions are made here, though:
This class name will always be only used for this kind of thing
This class name will never need to change
The best tool HTML gives us to describe the element's interactive role is the
data- attribute. The attribute can be anything you want, and so can the value. Whatever complex settings we have for the element can be represented in it. By marking our element
data-page-title, so long as that's still the page's title element, we probably won't need to refactor, regardless of content or styling changes.