In this article I am going to remind us all about the class names. I'll try to explain the true meaning of classes in HTML and take a look at their usage.
True Meaning of Class Names in HTML
Just as the element's id, class names placed inside a class attribute are actually used to identify the element. Their "secondary" purpose is to be used as a more precise style sheet selector.
Class attribute is a part of the HTML structure so opinion that it's there only for styling purpose is wrong. Sure, widely spread habit among web designers is to use class names almost exclusively for that purpose, but saying that class attribute is only for CSS selecting would be more or less the same as saying that element tag names or ids are there only to be used in style sheets.
Multiple Names
Class attribute allows multiple class names. While element can have only one id you can assign as many class names to an element as you want. Think of it like this: YOU have your unique name, but you can also be identified as a web designer, male, athlete, student, friend, geek etc. While your name is your ID these attributes are your “class names”.
Just as you can belong to many groups of people HTML elements can belong to different “groups” so it makes sense that class attribute can accommodate many class names.
Semantics
We said that classes in HTML are part if its structure. Just as you need to take care of semantic meaning when building structure of a document or wrapping content inside HTML elements, you need to take care of class name semantics.
How to choose a proper class name for the element? Well, remember that you need to identify the element not describe its appearance. Step away from thinking about classes as purely presentational tools. Let's use that personal analogy once more, if you would assign “class name” for yourself you can't describe yourself as a “red shirt” because next day you might want to wear a blue shirt. So, HTML element can't be identified as “red”, cause it can easily change color.
Usage
We said that class names are used to identify the element and used as a style sheet selectors. In my recently released framework I have a set of built-in set of JavaScript functions and I am using class names as “hooks” to trigger element's behavior. For instance in my tooltip example I simply assign a class name “tooltip” to an element and activate the functionality. Many JS libraries, support class names selectors so it's fairly easy to “get” to the element you want to use.
Hope this article help you understand the meaning of class names or perhaps remind you what the class names stand for. :)
Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of
Benjamin Reid on 16 Dec, 2009 wrote:
Almost everyday I start writing a new site/markup, so I've come up with some constant class names that I'll use for forever more or at least until HTML5 is the standard.
Redswish on 16 Dec, 2009 wrote:
Although classes should be named semantically, it's often hard to avoid using visual references as well. For example if I have a set of <h3>s on a site that are a different colour on different pages, instead of duplicating the styles for each one, I can just assign the class red/green/blue etc and include a set of generic styles that can be applied to all manner of elements by simply adding another class to them.
When we bring JS into the mix, especially with pre-built plugins, we can find that we're assigning classes based on what the element is, what is looks like and what actions it performs (eg "bodyHeader red slideDown").
Reading back I've pretty much said exactly what you have in the post, oh well it's done now!
Cheers Alen.
Edgar Leijs on 16 Dec, 2009 wrote:
Standard names for standard elements, yeah... Class-names should be as objective as possible and re-usable. Describe your class-names for it's purpose(s) and not for how it should look like...
<h3 class="bigredbold warningheader indexpageonly serifheaders">Oohps!</h3>
Gr, Edgar
freaknboy on 16 Dec, 2009 wrote:
Only one ID by element, and as many classnames as we want !
Thks
Jacob Lowe on 16 Dec, 2009 wrote:
Thanks for the Post
Peter on 16 Dec, 2009 wrote:
Carl on 17 Dec, 2009 wrote:
cssglobe on 17 Dec, 2009 wrote:
strija on 17 Dec, 2009 wrote:
Depends on the situation, but if you only need different styles for your headlines for every page, you can just assign a class to the body.
body.home-page h2 { color: #000; }
body.sub-page h2 { color: #c00; }
Red on 21 Dec, 2009 wrote:
jitendra on 1 Jan, 2010 wrote: