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. :)
Benjamin Reid 16 Dec, 2009
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 16 Dec, 2009
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 16 Dec, 2009
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 16 Dec, 2009
Only one ID by element, and as many classnames as we want !
Thks
Jacob Lowe 16 Dec, 2009
Thanks for the Post
Peter 16 Dec, 2009
Carl 17 Dec, 2009
cssglobe 17 Dec, 2009
strija 17 Dec, 2009
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 21 Dec, 2009
jitendra 1 Jan, 2010