Stay Classy and Don't Forget Your IDs

Rules for Da Web and Da Club

July 23, 2014


The rules for classes and IDs in CSS and HTML are few, but extremely important, especially as we get build more complex sites and start involving interactive functionality.

The most important question to ask yourself when determining whether to use an ID or class is "How often do you plan on using these styles." If you plan on using a particular set of styles more than once on a page, then you definitely want to create a class around those styles. An ID can only be used once on a page, if it is used more often, your page has a high chance of breaking, and you most definitely will not be able to focus any functionality around that ID.

The second most important question to ask yourself is "how often do you plan on using these styles." It is important to build out naming conventions that make sense and can be used across a wide range of pages on your site. Classes with names like "padded", "blue-background", "headline": these are all reusible class names. If they had more specific names, or names that didn't match their purpose, it would be confusing for other designers working with your site to find and use them as the site expands.

Final note: consider your naming conventions when creating titles for IDs and classes. Make sure that you choose either camel casings (blueBackground) or hyphens (blue-background) and stick to it throughout all of your css and html.