title: BEM and "active" classes / Decoupling HTML and JS
body: <p>I've started using BEM methodology to decouple my HTML and CSS ... and it works pretty well most of the time. Even if its only your personal opinion, i would still like to know how others deal with this:</p>
  
  <p>Let's assume we need to build a simple navigation. The HTML looks similar to</p>
  
  <pre><code>&lt;nav class="nav"&gt;
      &lt;ul class="nav__list"&gt;
          &lt;li class="nav__item"&gt;
              &lt;a class="nav__link" href=""&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav__item"&gt;
              &lt;a class="nav__link" href=""&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I'm not sure if i need the ".nav_<em>item" and ".nav</em>_link" or if it's better pratice to use this instead</p>
  
  <pre><code>.nav__list &gt; li { CODE }
  </code></pre>
  
  <p>But my real issue is how to deal with "active" classes (not just for navigations, but in general). Is it better to use specific "active" classes like ".nav_<em>item--active", so you can just use a single class inside your CSS file or if using more general class names like ".is-active" works better? But then you need to specify your classes inside your CSS file like ".nav</em>_item.is-active" or (which looks even worse to me) ".nav__list > .is-active".</p>
  
  <p>Every method has its downsides. To me the second way looks wrong if using BEM, but if you are going for the first way you run into "troubles" with your JS, because you need to "hard-code" the specific class name into your JS</p>
  
  <pre><code>someElement.addClass(".nav__item--active");
  </code></pre>
  
  <p>That way your JS relies too much on your HTML structure (or doesn't this matter too much?), which might change... And this leads to the second question. I heard that it's good to decouple not only your HTML and CSS but also your HTML and JS. So you could for example use those ".js-" classes to add click events and all that kind of stuff to elements instead of using your "styling" classes to trigger those kind of events. So instead of using</p>
  
  <pre><code>&lt;button class="btn btn--large"&gt;&lt;/button&gt; // $(".btn--large") in jQuery
  </code></pre>
  
  <p>you would have</p>
  
  <pre><code>&lt;button class="btn btn--large js-dostuff"&gt;&lt;/button&gt; // $(".js-dostuff") in jQuery
  </code></pre>
  
  <p>I think this in combination with HTML5 data-attributes works for pretty much for anything, but i'm asking myself what happens to navigation or accordions or stuff like that. Is it better for maintainability to use those ".js-" classes as well (for every item)</p>
  
  <pre><code>&lt;nav class="nav"&gt;
      &lt;ul class="nav__list"&gt;
          &lt;li class="nav__item js-open-subnav"&gt;
              &lt;a class="nav__link" href=""&gt;&lt;/a&gt;
              &lt;ul class="nav__sub"&gt;
                  &lt;!-- ... --&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>or should i use $(".nav__item")... in my JS in this case? But that way you don't really decouple your HTML and JS (at least as far i understood this topic). It's not just about navigations, but about all those kind of javascript interactions, like accordions, sliders and so on.</p>
  
  <p>I'll hope you guys can share some best practices for those questions and help me out.</p>
  
  <p>Thanks</p>