title: Confusion with BEM modifiers
body: <p>I have started using <a href="http://www.vanseodesign.com/css/block-element-modifier/">BEM methodology</a> while writing my CSS and there have been few occasions where I have struggled to find out the best way to do a particular thing.</p>
  
  <p>I would like to take up a simple example of a panel here.</p>
  
  <p>Lets say I am writing a panel component CSS using BEM style. So my CSS might look as follows:</p>
  
  <pre><code>.panel {}
  
  .panel__titlebar {}
  
  .panel__content { display: none; }
  </code></pre>
  
  <p>A panel can be either chromeless or with chrome. So I define another modifier class for the panel:</p>
  
  <pre><code>.panel--with-chrome {
   border: 4px solid black;
   border-radius: 4px;
  }
  </code></pre>
  
  <p>Now lets say, the panel can be in a fullscreen/maximized state also in which the chrome and titlebar disappear. Instead of defining modifiers for both panel and titlebar, it would be be wise to define the modifier just on parent (say panel--fullscreen) and rest elements shall change accordingly. So now my CSS becomes:</p>
  
  <pre><code>.panel--fullscreen {
   /* something has to be done here */
  }
  
  .panel--fullscreen .panel__titlebar { display: none; }
  </code></pre>
  
  <p>To remove the chrome in fullscreen mode, I can either:</p>
  
  <ol>
  <li><p>toggle the <strong>panel--with-chrome</strong> class in JS along with the <strong>panel--fullscreen</strong> class </p></li>
  <li><p>overwrite the chrome CSS inside the <strong>panel--fullscreen</strong> class.</p></li>
  </ol>
  
  <p>First isn't good because ideally I would like to simply toggle just one class (<strong>.panel--fullscreen</strong>) in JS to toggle fullscreen mode.</p>
  
  <p>And second one is bad because I'll have to overwrite previous CSS which is a bad practice.</p>
  
  <p>So whats the best way to go about it? Appreciate your comments.</p>
  
  <p>Thanks</p>