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?
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.