Best CSS .Classes for CSS Toolbox

As a Professional Web Developer and Designer, CSS is by far one of the most useful tools I use. Moving from one web site to the next is made easier by having a CSS Toolbox containing some default CSS Classes that you use over and over again. Here are 10 of my favorite CSS Classes.

What are Your favorite CSS Classes? Please share your tips!

Universal CSS .Classes

Most of these are what I like to think of as "actionable" classes, IOW, they aren't just color classes or font-size classes.

1. .S {display:block; visibility:visible;} - Shows the element.
2. .H {display:none; visibility:hidden;} - Hides the element.
3. .VV {visibility:visible;} - Makes the element visible.
4. .VH {visibility:hidden;} - Hides an element but still takes up space, not fullly hidden like .H
5. .FR {float:right;} - Floats the element to the right.
6. .FL {float:left;} - Floats the element to the left.
7. .DI {display:inline;} - Changes the display type to "inline".
8. .DB {display:block;} - Makes the element a block-level element.
9. .C {clear:both; padding:0; margin:0; line-height:2em; font-size:10px; border-bottom:1px solid #FFF;} - Clears floated elements.
10. .CENT {margin:0 auto;} - Makes block element centred.

Please note that these classes are meant only to show what can be done with CSS, I wrote this post for CSS guru's and up and coming gurus. Sometimes I assume everyone reading my blog know as much as I do about what I'm writing about, so I skip almost all explanation and skip to the code. Basically stick to the W3C's recommendations and try not to use classes inline unless its for something specific. Most of these classes are very useful for use in javascript as well using the element.className='S' method.

Universal CSS Classes Example

<br class="C" /> - clears any block level element.
<hr class="C VH" /> - Its still a block-level element, so it correctly clears floated elements and is a semantic page separator.
<img class="FR" src="/1.gif" alt="" /> - this image will float to the right.
<p class="CENT"> - the p is centred (if width isn't 100%;).

Think you are such a CSS/semantics guru that using classes is below you? Ridiculous! Classes are extremely helpful when used properly and not in excess. Surely you don't think you know more than Eric Meyer or the W3C... please view their source code, and try to loosen up while your at it ;)

• Feed for this Entry
• Trackback
• htaccess rewrite rule

Reader Comments

1. Jimmy ~November 20, 2009 @ 10:29 am

   I think this idea is best used when editing someone else's site without having to go in an change all kinds of code. Simply drop in a new class and edit away. If I was to freelance a job, I would totally uses these classes. Make the change the client needs, quickly and they don't care how you did it.
2. anonymous ~November 30, 2007 @ 3:04 am

   WTF. Ever hear of preserving semantics. Horrible examples. You're just going back to hardcoding values like in HTML sans CSS. Professional developer? Get a clue.
3. AskApache ~November 29, 2007 @ 4:49 pm

   @ Hostile Monkey

   Please don't talk about yourself in third-person on this blog. ;)

4. elliott cable ~November 29, 2007 @ 2:43 pm

   This is very broken, though. The whole point of CSS is separating design from content. With these markups, you have to hardcode design decisions directly into the HTML, which is bad practice.
5. Chris Coyier ~November 29, 2007 @ 2:04 pm

   .extraemphasis Usually strong or em tags are enough and the most appropriate semantically, but sometimes it's nice to have a universal class for adding extra emphasis to a particular element. Could be anything: a bump in font size, a border, a color change...
6. Chad Crowell ~November 29, 2007 @ 1:48 pm

   Nice list- I have to admit I was hoping for something more, but this is cool. I kind of do the same thing but I never keep them all in a place where I can just paste them in (maybe textexpander is a good place) - instead, I go run through old css files to find them and cut and paste...not very efficient!
7. Hostile Monkey ~November 29, 2007 @ 11:46 am

   Boy, you guys really didn't get Designing with Web Standards, did you? The Hostile Monkey hopes you eventually figure out why CSS is useful. In the meantime, best of luck with those classes!
8. Alexx ~November 29, 2007 @ 10:19 am

   = .. much faster and less coding
9. Tom ~October 31, 2007 @ 5:50 am

   nice . I still need to learn a lot about css when I see this !
10. Luka ~October 19, 2007 @ 6:11 am

    I thought I've seen all with reset.css and global classes like .red or .center but this is very nice too. Thanx
11. Ajay ~October 17, 2007 @ 8:35 am

    In addition to those above, I also use .alignleft and .alignright to align paragraph text left or right. I also usually create classes for different sizes of text in em

Add Comment!