Question

Is there any performance gain in using single css class vs multiples on an element?

Ex:-

<div class="single-class"></div>

vs

<div class="no-padding no-margin some-class some-other-class"></div>

Answer 1

If you have an even moderately complex stylesheet and know what you’re doing, using multiple classes has the benefit of taking full advantage of the cascade, which in the end most likely means that your css files will be smaller as you won’t be duplicating code. So, in this sense, it actually has a positive impact on performance (dependent on the complexity of your css).

I’m trying to imagine what the jQuery UI stylesheet would look like if it used a one-class-per-element approach. I imagine it would double in size.

Of course like everyone said, the impact is so small you won’t notice. Continue your use of multiple classes and embrace the cascade!

---

FWIW, I really don’t like class names like no-padding, float-left and ui-corner-all. Though they make sense to the css author, a semantic approach combined with multiple elements per declaration (to avoid duplicating rules) is almost always preferred. Using the first method, your css will make no sense if you decide that no-padding actually needs 1px padding, and that a.classname.float-left actually needs to float right.