The Meaning of Semantics Take II: Naming Conventions for Class and ID in CSS
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Call me guilty, because I am. Everything I'm about to share regarding best practices when it comes to naming conventions for IDs and classes in CSS has come about as a result of having made the mistake of doing exactly the opposite of these techniques. Of course, I'm not entirely to blame because it's taken us all some time to get comfortable with the technologies we use for the Web.
But as we move toward cleaner, more meaningful markup (see Part I of this article), we can see clearly now—and what we're finding is that we can write our class and ID names to be far more useful. The benefits are great: better document management, improved ability to share documents, more efficient workflow, and simply better cognition for anyone viewing source.
Starting Basic
Although many readers will be familiar with the difference between class and ID, I'm going to reiterate their individual uses here for the sake of clarity.
A class can be considered a custom selector, and it can be used globally within a document and throughout a site. This allows for specific styles to be applied to numerous elements. If I want to have a style for any text that relates to news items on my site, I might create a class using a dot and a custom name as follows:
.news
This allows me to apply the styles I've chosen to describe the .news class to any element via the class attribute:
<div class="news"></div> <p class="news"></p> <blockquote class="news"></blockquote>
All these elements are now styled with the .news class. I can limit my class to specific elements if I like by placing the element selector in front of the class:
p.news
Now I can use the class of .news in this case only in relation to the p element.
IDs are similar to classes in that they are custom selectors, but they cannot be used globally within a document. The entire purpose for an ID is to choose one distinct element within the document and identify that element as being unique. This is important, both for the application of style as well as scripting, via the DOM (Document Object Model) and JavaScript. An ID can be used site-wide, but only one instance of a given ID name is allowed within an individual document.
An ID selector is created with an octothorpe (the technical term for hash mark) followed by the custom ID name:
#news
In this case, I now have an ID called "news". Because this ID name can be used only once per document, it will likely be a structural division for styling a news item section:
<div id="news">News items go here</div>
As with classes, I can limit the ID name to a specific element:
div#news
If you've followed the logic here, you might be wondering why, if an ID name can only be used once per document, it makes any sense at all to limit it to a specific element, suggesting that in its raw state it could be used with any element, just as a class can. Not so!
The first and perhaps most significant reason as it pertains to CSS is that adding the element makes the ID more specific, and therefore more dominant over other potentially conflicting styles within any of the style sheets related to the document in question. The second reason is a more human-oriented one: When multiple people are working on a site, it's clearer as to how the particular ID is being used when the element the ID name is associated with is placed in front of the ID. Style guides can then be written to assist the folks working with the markup and CSS and help them avoid misunderstandings and confusion.