title: Is concatenating classes good practice?
body: <p>Why do I see <code>.closed-dialogue</code> and <code>.open-dialogue</code> so often in commonly-used libraries, instead of <code>.closed.dialogue</code> and <code>.open.dialogue</code>?</p>
  
  <h2>the problem with a single class per element</h2>
  
  <p>To format all dialogues with the first approach, you would already need two classes in the selector.</p>
  
  <p>Each time you add another difference, f.e. some colour, you would multiply the number of classes in the selector: <code>.warning-dialogue-closed, .error-dialogue-closed, .warning-dialogue-open, .error-dialogue-open</code>.</p>
  
  <p>Now how can that be good practice? This is hardly maintainable!</p>
  
  <p>You couldn't even separate your code in modules, since the basic selector for dialogues needs to know all dialogues that exist!</p>
  
  <h2>several classes per element solve this</h2>
  
  <p>By concatenating several classes, the code would be way shorter, more maintainable and easier to read:</p>
  
  <p><code>.dialogue</code> formats all dialogues, no matter how many different you have.</p>
  
  <p><code>.error.dialogue</code> and <code>.warning.dialogue</code> would add changes for either flavour. <code>.open.dialogue</code> and <code>.closed.dialogue</code> would take care of the other difference.</p>
  
  <p>You even could have another isolated module that defines <em>big</em> and <em>small</em> dialogues, and the basic module doesn't even have to know about it.</p>
  
  <p><strong>So why have I never seen this?</strong></p>