Many developers are puzzled when it comes to assigning class names to elements and often end up using wrong ones. Class names should not describe how the element looks like or where is it placed. A good class name should describe what a certain element represents.
Here are my top 10 class names with explanations. Hopefully it will give you a clearer image of what kind of class names you should use.

class="fixed"

I use this class name in every style sheet. This is the class name I assign to container element that contains floated child elements. I use it to clear the floats within that container with this:

.fixed:after{
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  */
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

So if I have situation like this:

<ul>
	<li><img src="images/img_01.jpg" alt="First Thumb" /></li>
	<li><img src="images/img_02.jpg" alt="Second Thumb" /></li>
	...
</ul>

…where images are floated next to each other I use:

<ul class="fixed">

…and that’s it.

class="alt"

Alt is short for "alternative" (or "alternate" if you want). I use this class name where I have a group of element styled in a certain way, but have some small variation on some of them. i.e. images floated to the left or right.

#content img{
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #ccc;
	padding:1em 0;
	background:#fff;
	}
#content img.alt{
	float:right;
	margin-right:0;
	margin-left:10px;
	}	
	

class="selected"

This is the class name I usually use on navigation item that is being selected:

<li class="selected"><a href="/about">About Us</a></li>

Also I use it when I have JavaScript tabbed content to mark a selected tab:

<dl>
	<dt class="selected">Tag Cloud</dt>
	...
	...
	...
</dl>

class="first", class="last"

Until :first-child and :last-child pseudo-classes are supported in all browsers (and I really mean all, like 99,9% "all") I am sticking with this. I use these class names to select first and last child of a certain element. I find this to be a great method in reducing unnecessary markup. I will write an example in one of my next posts.

class="image"

I normally select image with tag selector (i.e. #content img) but this class name is used for image container (p class="image") when situation requires it. Let’s say you have a news list and you need image with caption below floated to the left and rest of the content next to it. I use:

<p class="image">
	<img src="/images/img_me.jpg" alt="my funny face" />
	This is me trying to look cool!
</p>
<p>
	The rest of the content here
	...
</p>

class="inner"

I often use this class and I must say that is mostly used for presentational purposes. I assign this class name to extra nested divs in case I need extra styling (i.e. double backgrounds)

<div id="container">
	<div class="inner">
	
	</div>
</div>

class="link"

As the name says, I use this class name for links. 🙂 But I place this on a container, usually a P tag, not the A tag itself. The most common usage is with those "read more" buttons.

<p class="link"><a href="#">Read more...</a></p>

That way I can style the anchor within the P with .link a but can also apply specific styling to the paragraph as well.

class="one", class="two", class="three"…

I use these class names when I have to target each element individually. Most common case is when using image replacement technique in navigation:

<ul>
	<li class="one"><a href="#">Home</a></li>
	<li class="two"><a href="#">About</a></li>
	...
</ul>

class="even", class="odd"

Class names used for alternating rows in tables or lists.

<ul>
	<li class="even">Content</li>
	<li class="odd">Content</li>
	<li class="even">Content</li>
	<li class="odd">Content</li>
</ul>

or

<table>
	<tr class="even">
		<td>Content</td>
		<td>Content</td>
	</tr>
	<tr class="odd">
		<td>Content</td>
		<td>Content</td>
	</tr>
	<tr class="even">
		<td>Content</td>
		<td>Content</td>
	</tr>
	<tr class="odd">
		<td>Content</td>
		<td>Content</td>
	</tr>
</table>

class="section"

This class name is formerly known as "box". 🙂 I use it for certain sections of content when I require some special styling.

<div class="section">
	content here...
</div>

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 (24 Comments)

1. John Faulds
   January 3, 2009

   I never use a clearfix class as in my experience, it's nearly always possible to clear/contain floats with some other method which makes the addition of an extra class unnecessary. But I've used pretty much all the rest of your examples, or something similar, in the past.

2. mike
   January 4, 2009

   hi, can you explain cons of using 'overflow:hidden;' on the container as oppose to the technique shown above for clearing floats.

3. spawnsdf
   January 5, 2009

   class="fixed" is very interesting, thanks. i'll try it in work

4. Thomas Winsned
   January 5, 2009

   Instead of using '.inner' why not use the HTML tag any save some bandwidth, and have less sematic markup From your example; #container DIV Instead of #container .inner I guess it might come down to personal preference, but I always feel less sematic markup is better :)

5. Harry Roberts
   January 5, 2009

   Hmm, it strikes me that a lot of those class names are insemantic and extraneous. Plus the fixed one can be sorted much easier by using: #element{ width:whateverpx; overflow:hidden; ... }

6. cssglobe
   January 5, 2009

   @Thomas Winsned: I often use class inner when structuring a document so using descendant tag selector would compromise other divs inside .inner.

7. cssglobe
   January 5, 2009

   @Harry Roberts: Care to explain which class names you find to be insemantic? The only ones that are questionable here are class names like one, two, three but I chose to use that over id's to target specific element because I often have a need to reuse those class names elsewhere in the document.

8. Fredrik W
   January 5, 2009

   I rarely clear floats nowadays. Just setting the parent to display: block; overflow: hidden; works great in most cases, since overflow: hidden; forces the parent to contain the floats. Works almost always in IE6 as well.

9. cssglobe
   January 5, 2009

   The main reason I use clearfix method is... well... ie6. I work on commercial projects and can't afford my sites fall apart in ie6.

10. fernando filho
    January 5, 2009

    i use class="clear". .clear{ clear: both; }

11. Marco
    January 5, 2009

    Great list! Learned some new things here. I am missing the "break" class, for example: <br class="break" /> .break { clear:both }

12. Evan
    January 5, 2009

    I have a few things here. Applying overflow:hidden to the container will clear floats. If you find that it is not working in ie6 you probably need to trigger hasLayout. You can use display:inline-block in a separate ie6 style sheet or place it below your overflow:hidden in the same style sheet. Using this technique there is no need to add empty divs or any extra classes to your html. I have seen .alt commonly used to define even/odd rows in tables to apply alternating styles. This is an alternative to even/odd. I almost always have two hidden classes that I used to hide text for image replacements or to show/hide elements by adding the class hidden(can come in handy when working with javascript). .text-hidden{ text-indent:-9999px; } .hidden{ display:none; visibility:hidden; }

13. Shane
    January 6, 2009

    Nice list, but I find the use of even and odd to be superfluous on table rows etc. Why not define a style for all rows, and then specify attributes for only the odd rows? That way, you only have to add class="odd" to your table.

14. cssglobe
    January 6, 2009

    @Shane: I often use both "even" and "odd" class names cause I have different styling for default elements (without class names). :)

15. John McMullen
    January 6, 2009

    Have you tried using a JavaScript library like jQuery to style your odd/even and numerical rows?

16. Jon Hartmann
    January 6, 2009

    @cssglobe What table rows are not either even or odd? If you are talking about headers or footers, you need to break out your <thead>, lt;tbody>, and lt;tfoot> tags.

17. Navdeep
    January 6, 2009

    Nice list. Here is what I use: .clear [clear both] .left [left float] .right [right float] .hidden [display none] .button [anchor buttons]

18. Kevin Mario
    January 7, 2009

    Awesome list, like the rest of the ppl here I pretty much use the same classes =) just commenting on the 1st one, its not working on IE 6 =(

19. Neal
    January 8, 2009

    You can replace all that garbage with the .fixed class with this: .fixed { overflow: auto; } I wrote an article explaining that <a href="http://www.nealgrosskopf.com/tech/thread.asp?pid=27">further at my website</a>. Also I like to use class names that resemble their CSS equivalent so instead of using .first or .last why not use .first-child and .last-child. It makes the transition to the real CSS selector easier in the future.

20. Neal
    January 8, 2009

    I forgot to mention, I like the new redesign of CSS Globe. You should add a <link> to your article RSS feed in your home page head tag. I just recently noticed that you had another RSS feed.

21. cssglobe
    January 11, 2009

    @Neal: I am sorry but I will not yet replace all that garbage with anything. Why? Well, example on your website doesn't work in IE6 (win XP). Also, other overflow methods also not working properly when container element is supposed to have top/bottom padding.

22. sidhu
    January 24, 2009

    Nice and useful post

23. Ben
    February 12, 2009

    Just a note on your clearing of floats - instead of the various hacks to accomodate our favourite brand of browser, you can add 'zoom:1;' to the '.fixed' class, (not the '.fixed:after'). This adds the mythical 'hasLayout' property to an element in IE 6 and 7, doesn't affect the look of an element and doesn't work in any other browser. If you are concerned about future compatibility/validating CSS, you could, (and should) put it in a seperate CSS file using conditional comments. See it in use: www.beseku.com/assets/css/screen/core.css (line #902) www.beseku.com/assets/css/screen/ie-6-win.css (line #7)

24. electric_g
    February 13, 2009

    Instead of applying the "fixed" class to the elements in the html document (which is not semantic), I prefer specify in the css which elements need to be clear. #header:after, #content:after { ... } #header, #content { ... }

Sorry, the comment form is closed at this time.