BEM and "active" classes / Decoupling HTML and JS

Question

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:

Let's assume we need to build a simple navigation. The HTML looks similar to

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
        <li class="nav__item">
            <a class="nav__link" href=""></a>
        </li>
    </ul>
</nav>

I'm not sure if i need the ".nav_item" and ".nav_link" or if it's better pratice to use this instead

.nav__list > li { CODE }

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_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_item.is-active" or (which looks even worse to me) ".nav__list > .is-active".

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

someElement.addClass(".nav__item--active");

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

<button class="btn btn--large"></button> // $(".btn--large") in jQuery

you would have

<button class="btn btn--large js-dostuff"></button> // $(".js-dostuff") in jQuery

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)

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item js-open-subnav">
            <a class="nav__link" href=""></a>
            <ul class="nav__sub">
                <!-- ... -->
            </ul>
        </li>
    </ul>
</nav>

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.

I'll hope you guys can share some best practices for those questions and help me out.

Thanks

Isn't it redundant to have both `nav` and `nav__list`. Applying `nav` to the ul would be better. Also I don't think `nav__link` and `nav__item` provide much help, because our navigations are a list anyway. Using `nav > li` is just fine imo. — kleinfreund, Jan 01 '14 at 15:21
@kleinfreund Thanks, i think you are right with nav__link and nav__item being too much. But if i don't use classes for the
I don't see a big problem in using `nav__item--active`. It's loose enough to bei either a `li` or a `span`, what so ever and but tells you exactly what's going on. Sure, it suggest there eventually is a `nav__item` as well and there is, but not as a assigned class. __Edit:__ Also I was talking about a `nav`-class for ul's, not the `nav`-tag. — kleinfreund, Jan 01 '14 at 20:53
@kleinfreund Thanks again, now i got your point. I agree that specific classes for the

score 6 · Accepted Answer · answered Nov 07 '13 at 01:51

BEM methodology says you shouldn't use any global selectors such as tag selectors so use nav__item and nav__link.

The same story with active modifier. You shouldn't have any global entities (you can use mixes but that's a bit different thing). So the best way is to go with nav__item--active (or nav__item_state_active in classic BEM notation).

And BEM has sollution for JS, HTML (or templates) and actually any other block's technology.

The main idea is that block knows everything about itself: how it looks (css), how it works (js), what html it should produce (templates), its own tests, documentation, images, etc.

And as css technology of the nav block applies rules in declarative way (you define some selector and all the nodes which match this selector are styled with these rules) the same way you can describe js of the nav block.

Please take a look at http://xslc.org/jquery-bem/ which is jquery plugin which gives you possibility to work with blocks in BEM way easily.

And in case you use some build system you can put all these technologies in the same folder on filesystem:

blocks/
    nav/
        __list/
            nav__list.css
            nav__list.js
        __item/
            nav__item.css
        nav.css
        nav.js
        nav.test.js
        nav.png
        nav.md

Having such file structure you may go deeper to what BEM actualy is and try i-bem.js: http://bem.info/articles/bem-js-main-terms/

@tadatuta thx for your answer, but I try to minimize the number of js plugin I use & their dependencies, on top of that the plugin you linked only has 2 contributors & barely any activity from other users , see the graphs/tickets & other history-related topics on https://github.com/hoho/jquery-bem/graphs/contributors — Adriano, Sep 08 '14 at 11:31
@tadatuta using "jQuery only", would this be the right approach to styling your active classes? if not, can you provide a corrected version on this jsbin ? thx. see http://jsbin.com/yiqovohopuba/1/edit?html,css,js,output — Adriano, Sep 08 '14 at 11:34
@AdrienBe yes, but I think it'll be quite reasonable to write a few helpers to set/get/toggle/delete modifiers and use them everywhere in you code. — tadatuta, Sep 09 '14 at 14:48
This answer doesn't really mention the problem of your JS depending on HTML's structure which is encoded in the class names. How to deal with it? Are there any tools that generate BEM metainformation for JS? — Tomáš Zato, Jun 17 '19 at 09:24

score 1 · Answer 2 · answered Oct 18 '15 at 09:27

Actually, js in terms of bem often considered as not such good idea. For instance, bem is great to localize and move relations in css to horizontal scale, but in terms of js it's hard to abstract logic in very complex applications.

In react.js you can use it for class naming, and that's it (we use it this way and it works fine!). I wrote a library for decoupling problem with naming.

BEM and "active" classes / Decoupling HTML and JS

2 Answers2