48

Is it a good practice to use many classes on one single HTML element? For example:

<div class="nav nav-centered nav-reversed navbar navigation-block"></div>

I don't mean that two or three classes on one element is bad, but how about four, five or even six?

Andrius
  • 653
  • 1
  • 6
  • 11
  • See: http://stackoverflow.com/questions/4354921/css-is-there-a-limit-on-how-many-classes-an-html-can-have – tymeJV Jun 28 '13 at 14:02

2 Answers2

70

Short Answer

Yes.

Explanation

It is a good practice since an element can be a part of different groups, and you may want specific elements to be a part of more than one group. The element can hold an infinite number of classes in HTML5, while in HTML4 you are limited by a specific length.

The following example will show you the use of multiple classes.

The first class makes the text color red.

The second class makes the background-color blue.

See how the DOM Element with multiple classes will behave, it will wear both CSS statements at the same time.

Result: multiple CSS statements in different classes will stack up.

You can read more about CSS Specificity.

CSS

.class1 {
    color:red;
}

.class2 {
    background-color:blue;
}

HTML

<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>

Live demo

Community
  • 1
  • 1
Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
  • Nice answer - nice formatting :) – Atrox111 Jun 28 '13 at 14:05
  • @relic180 The behavior will remain the same: CSS statements will just stack up. – Jeff Noel Jun 28 '13 at 14:09
  • @Ghillied But that's not the question. The question being asked is "is it bad" to use a large number of classes. Not; is it possible... or, how does it work. – relic Jun 28 '13 at 14:11
  • 1
    @relic180 The question being asked is *Is it a good practice to have multiple classes on an HTML element*. The answer is *yes*. It is also valid and complies within W3c specifications. The rest of the answer is opinion-based and it is against SO guidelines, so I won't go into the specific *I think you should do that or this* part of the question/answer. – Jeff Noel Jun 28 '13 at 14:13
  • @Ghillied I understand what you're saying... but read the last paragraph of the question. He's explicitly drawing a distinction between using 2-3 classes, and using 4-6 classes.. and then specifically asking about the later and NOT the former. – relic Jun 28 '13 at 14:29
  • @relic180 I edited my first paragraph, stating about length of the class attribute, thus answering about the number of classes. But I see what you mean, although a *good* answer to this can't be formulated with undeniable facts. – Jeff Noel Jun 28 '13 at 14:50
  • 2
    late comment but just wanted to point out if you added a `color:green` on class2, whatever order (top to bottom) your CSS file is in is the last style to be applied. e.g. class 2. http://i.imgur.com/f2q19Dl.png – Vincent Tang Jun 23 '17 at 03:48
5

It's a good practice if you need them. It's also a good practice is they make sense, so future coders can understand what you're doing.

But generally, no it's not a good practice to attach 10 class names to an object because most likely whatever you're using them for, you could accomplish the same thing with far fewer classes. Probably just 1 or 2.

To qualify that statement, javascript plugins and scripts may append far more classnames to do whatever it is they're going to do. Modernizr for example appends anywhere from 5 - 25 classes to your body tag, and there's a very good reason for it. jQuery UI appends lots of classnames when you use one of the widgets in that library.

relic
  • 1,662
  • 1
  • 16
  • 24