Quick Tip: Save Time by Using Multiple Classes

Yay First :D

I agree that the theory here is good but the actual example is problematic. You’ll make thing easier on yourself and the lifespan of your site if you avoid names like “blue” and “bold” and make them describe what you are trying to accomplish instead like “callout” or “button”.

Yeah, style=”width: 100px; float: right;” is even shorter, isn’t it? You don’t have to define all the silly classes in the extern CSS file!

Seriously, we use CSS to get one abstraction layer more and distinguish between content (XHTML) and presentation (CSS). Using your advice people will bring the presentation layer information back into content layer.

The CSS classes should reflect the logical nature of the element. E.g.: hint, comment, category-name, post-excerpt. However the last one could be written as … … … . In this case you are able to change the look of the elements when required without touching the XHTML and your XHTML will be much cleaner.

Cheers.

I agree with Clayton. Anyone that sent me CSS marked up like this wouldn’t get much respect from me. This method is short sighted and borders on counter intuitive.

Yeh, good idea Jeffrey. Like you said, a lot of people use this as a learning resource – we don’t want them getting the wrong idea…

my example:
imagine, i need unordered list of items with bullets coloured differently for each item. my bullet will be 6 by pixels image. i’ll have 5 items. so i create image 6 by 30 pixels containing blue, orange, gray, green and pink bullet. then for the 1st bullet i assign background-image, and then for others i change its position using my classes..

html:

list item #1
list item #2
list item #3
list item #4
list item #5

css:

li .dot {
position : absolute;
top : 0.4em;
z-index : 1;
width : 6px;
height : 6px;
margin-left : -15px;
background : url(fo-list.png) no-repeat;
}

.orange {
background-position : 0 -6px;
}

.gray {
background-position : 0 -12px;
}
.green {
background-position : 0 -18px;
}
.pink {
background-position : 0 -24px;
}

Ive been deving a css file that does rbg align font etc. so this will be helpful

Personally I have never been a fan of doubling up classes on a single element – the risk is to high for me to brake something without realizing it when modifying one of the classes. I prefer instead to create a new single class to handle the difference, eg:

.image {
border: 1px solid #000;
}

.image-right {
border: 1px solid #000;
float: right;
}

For me this gives much more control. It may make the CSS larger, and slightly more complicated, but safety of editing rules over this for me.

Good idea naming them .primaryColor .secondaryColor instead of what I see people doing (e.g. .blueColor etc…). My advice is to make sure you really need multiple classes for what you’re doing before you actually use more than one. Keeping layout and style as separate as possible is key when it comes to easily maintaining websites.

ah woops, you have a typo posted as of 8/13 3:34pm:

.floatRight {
float: rightright;
}

nice post idea! keep them coming!

Awesome tip, I never knew you could do that!

Taking what Dan said even farther, it’s important the CSS definitions don’t describe how something looks right now, but rather what it is.

“floatRight” describes how it looks. The whole purpose of an external CSS is that you can deal with layout issues separately. With .floatRight, if your layout changes and you want the image on the left, you have to change the CSS and the HTML. Instead, what is the image? Describe the content:

img.headshot { float: right; }
img.primary {float: right; }

Also, to comment on what Ben said, you should never need .image { } or .image-right { }. Instead don’t use any class:

.article image {
border: 1px solid #000;
}
.article image.primary {
border: 1px solid #000;
float: right;
}

Well – this article has certainly provoked a lot of debate, which is a good thing.

There are different levels of semantics with CSS – I’d never use .blue, for example, because, as many people have said, your .blue class might not have blue characteristics further down the line.

I prefer to use semantic terms such as header, footer and sidebar. But… I have mixed things up a little by using multiple classes.

In his book ‘Transcending CSS’, Andy Clarke suggests that for layout, sites use a similar convention, such as header, footer and so on. That way, the layout ‘blocks’ are consistent across sites, and a user-defined stylesheet could style them in a similar way.

I always used a floatRight-class but never thought about a primaryColor-class or an important-class. Nice idea!

very nice trick,thanks

Good tip!
Thank you :)

@Rob, the stand out class doesn’t need to convey that it deals with bolding. The idea behind this class is, if you decide you want to change the way your elements can stand out you can do it once in the css without having to change it a hundred times in the CSS.

For example: Client brief says first paragraph must stand out. You present them with the results of this css.

.standOut {
font-size: 22pt;
font-weight: bold;
}

When you present the complete beta site to the client, client asks if something else could be done to make it stand out more. You respond with:

.standOut {
font-size: 22pt;
font-weight: bold;
background-color: #999999;
border: 1px solid #666666;
}

If you had been using a class name like ‘.bold22′ you’d be in for a fun few hours of find and replace.

The idea is to make it so the function is clear not the style.

very quick and useful, thank you. I don’t usually think of adding multiple classes to an object like that

I am super lazy about making classes, but I always spending more time adding style to individual paragraphs. I really need to start doing this more often.

You code markup wont be valid XHTMl if you go down the path of using multiple classes on an element.

This is one of those things that you know about but you never practice. Meaning its a great tip but you just dont think about it when you could be using it.

Thanks for the wake up, also i got what you where saying. there is no need to pick it apart that much.
Thanks for you help.

This article leaves something to be desired, but it’s a great idea.

You’re using named elements, rather and descriptive elements.

What css is trying to emulate is something called a polymorphic function, or polymorphism. Code should be written without a specific type, so that you can re-use that code down the road on all kinds of things you may not have originally intended. So, for example, instead of calling your image callouts .articleImage, consider something like .decoratorstyle1. There are a ton of naming conventions, and that’s NOT THE POINT of this. If you use abstraction, you can re-use your base classes outside of their intended name space and object space, and dramatically reduce the amount of css required, especially on complex or multi-layout sites. Remember, a subclass should only have to capture the delta of the change from the parent class, which really eliminates a lot of code.

See this article on the subject:
http://www.simplebits.com/notebook/2003/04/15/css_inheritance.html

This is really useful and something that I need to work on implementing more into my sites. I think a lot of being able to write your css out like this comes down to planning.