What is a better way to set CSS styles?

Example you need to float a bunch of elements.

Option 1 - Chain elements

#elm1, #elm2, #elm3, #elm4 {float:left}

Option 2 - Add a similar class to elements

.float {float:left}

Option 3 - Add style to class individually

#elm1{float:left}
#elm2{float:left}
#elm3{float:left}
#elm4{float:left}

I prefer 1 but I don't know how much of a speed impact it has, are there any other options? Whats the convent开发者_开发知识库ion for this?

http://css-tricks.com/efficiently-rendering-css/ Seems to say that IDs are the most efficient, although IMHO I would think the class is cleaner and more accurately represents what you are trying to express.

From Google's article @ http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

"Avoid a universal key selector. Allow elements to inherit from ancestors, or use a class to apply a style to multiple elements."

So, I think best practices says use a class. Its clean and readable IMHO.

Use option two (classes) for the global cases. That's what class selectors are meant to do.

Use the ID for styling specific differences. This is what ID selectors are meant to do.

    .myclass {
       float:left;
       height:10px; 
    }

   #elem2 {
     height:69px;
     color:#ABCDEF;
   }

The whole purpose of css is to free html from presentation. Thus the semantic approach is always the good one.

If you use .float { float:left } you might as well use style="float:left"... (okay this is an exageration, but the point is that the less style classes you use the better the separation between presentation and information)

As previously mentioned, the best approach is to semantically identify and classify your html code and then use DOM relationships

#elements {
   float:left;
}
   #elements li {
      color:#ABCDEF
   }
   #elements li.odd {
      color:#123456
   }

Most CSS minimizer and "cleaners" will do your first option. In my opinion, it's much better than creating a new class to add to a bunch of elements just for style and it's a million times better than your last option.

In CSS, if it already has an ID or a class, you can apply style to it. So, comparing option 1 to option 2, option 1 should be your better choice. You don't have to go back through your code and add classes to elements that already have IDs and you don't have to juggle style between the ID and the class for the same element in your stylesheet.

As far as speed is concerned, I don't think there is much difference between the 3 options. I think it's more of a maintainability question. It seems like option 1 is going to be easiest to maintain of the options so that's probably what I would go with.

There are certain trade-offs involved. Generally, anything ID-based is believed to be faster, especially as the pages grow heavier. On the other hand, http://net.tutsplus.com/tutorials/html-css-techniques/object-oriented-css-what-how-and-why/ and similar article authors believe that using classes for common rules makes sense and should be used. The speed difference is often negligible and carefully used classes make maintaining and updating design a lot simpler.