Is concatenating classes good practice?

Question

Why do I see .closed-dialogue and .open-dialogue so often in commonly-used libraries, instead of .closed.dialogue and .open.dialogue?

the problem with a single class per element

To format all dialogues with the first approach, you would already need two classes in the selector.

Each time you add another difference, f.e. some colour, you would multiply the number of classes in the selector: .warning-dialogue-closed, .error-dialogue-closed, .warning-dialogue-open, .error-dialogue-open.

Now how can that be good practice? This is hardly maintainable!

You couldn't even separate your code in modules, since the basic selector for dialogues needs to know all dialogues that exist!

several classes per element solve this

By concatenating several classes, the code would be way shorter, more maintainable and easier to read:

.dialogue formats all dialogues, no matter how many different you have.

.error.dialogue and .warning.dialogue would add changes for either flavour. .open.dialogue and .closed.dialogue would take care of the other difference.

You even could have another isolated module that defines big and small dialogues, and the basic module doesn't even have to know about it.

So why have I never seen this?

Answer 1

The problem with your approach is that it's more likely to conflict with other classes.

If the page itself has some other unrelated open class, class="open dialog" will pick up rules for that class and get messed up.

This is why libraries like jQuery UI tend to prefix all of their classes with a unique value.