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. 🙂

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (11 Comments)

1. Benjamin Reid
   December 16, 2009

   First, congrat's on the framework, it is pretty swish. Secondly, I'm completely agree with your explanation of how class names should be used, bar some exceptions where you're using a 'red' class to turn elements background a certain red across a site (this of course would be a secondary class so, class="tooltip red" or class="button red"). 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.

2. Redswish
   December 16, 2009

   Nice quick post, I like to see more stuff like this. It's nice to reminded of the basics every now and again. 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.

3. Edgar Leijs
   December 16, 2009

   Hi Alen, nice shortpost! 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

4. freaknboy
   December 16, 2009

   Nice, it's that kind of rules developers must respect, Only one ID by element, and as many classnames as we want ! Thks

5. Jacob Lowe
   December 16, 2009

   Interesting Im still a amateur in some of my css undertakings, so i think this bit of information can be really helpful. I can see using it for various things like text format, element alignment, and overall appearance of element. Thanks for the Post

6. Peter
   December 16, 2009

   Sorry, but who are you writing for? Kids? Your site is a communinty of well skilled guys!

7. Carl
   December 17, 2009

   Thank you for this, great to have a nice reminder :)

8. cssglobe
   December 17, 2009

   @Peter: are you a well skilled guy? Funny, I can't tell by your link!

9. strija
   December 17, 2009

   @Redswish 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; }

10. Red
    December 21, 2009

    Good article, simple but effective.

11. jitendra
    January 1, 2010

    although I've seen many articles on this topic but this one is also useful and some different info.

Sorry, the comment form is closed at this time.