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>
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
John Faulds on 3 Jan, 2009 wrote:
mike on 4 Jan, 2009 wrote:
spawnsdf on 5 Jan, 2009 wrote:
Thomas Winsned on 5 Jan, 2009 wrote:
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 :)
Harry Roberts on 5 Jan, 2009 wrote:
#element{
width:whateverpx;
overflow:hidden;
...
}
cssglobe on 5 Jan, 2009 wrote:
cssglobe on 5 Jan, 2009 wrote:
Fredrik W on 5 Jan, 2009 wrote:
cssglobe on 5 Jan, 2009 wrote:
fernando filho on 5 Jan, 2009 wrote:
.clear{
clear: both;
}
Marco on 5 Jan, 2009 wrote:
I am missing the "break" class, for example:
<br class="break" />
.break { clear:both }
Evan on 5 Jan, 2009 wrote:
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;
}
Shane on 6 Jan, 2009 wrote:
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.
cssglobe on 6 Jan, 2009 wrote:
John McMullen on 6 Jan, 2009 wrote:
Jon Hartmann on 6 Jan, 2009 wrote:
Navdeep on 6 Jan, 2009 wrote:
.clear [clear both]
.left [left float]
.right [right float]
.hidden [display none]
.button [anchor buttons]
Kevin Mario on 7 Jan, 2009 wrote:
just commenting on the 1st one, its not working on IE 6 =(
Neal on 8 Jan, 2009 wrote:
.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.
Neal on 8 Jan, 2009 wrote:
cssglobe on 11 Jan, 2009 wrote:
sidhu on 24 Jan, 2009 wrote:
Ben on 12 Feb, 2009 wrote:
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)
electric_g on 13 Feb, 2009 wrote:
#header:after, #content:after {
...
}
#header, #content {
...
}