BEM and Active Classes / Decoupling HTML and JS

Question

I started using the BEM methodology to separate my HTML and CSS ... and it works pretty well most of the time. Even if this is only your personal opinion, I would still like to know how others handle this:

Suppose we need to build a simple navigation. HTML looks just like

<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 .nav_item and .nav_link, or if it is better to use this instead

 .nav__list > li { CODE } 

But my real problem is how to deal with “active” classes (not only for navigation, but in general). Is it better to use special "active" classes like ".nav_item - active", so you can just use one class inside your CSS file or use more common class names like ".is-active" to work better? But then you need to specify your classes inside your CSS file, for example, ".nav_item.is-active" or (even worse) ".nav__list> .is-active".

Each method has its drawbacks. For me, the second method looks wrong if you use BEM, but if you are going to encounter “problems” with your JS in the first way, because you need to “hard code” the name of a particular class in JS

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

So your JS relies too much on your HTML structure (or is it not too much?), Which could change ... And that leads to the second question. I heard that it’s nice to separate not only your HTML and CSS, but also your HTML and JS. Thus, you could, for example, use these .js- classes to add click events and all such things to elements, instead of using your “styling” classes to trigger such events. Therefore, instead of using

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

you will have

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

I think this, combined with HTML5 data attributes, works for almost anything, but I ask myself what happens to navigation or accordions or the like. Is it better to use these ".js-" classes (for each element) for convenience

 <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 this way you really do not separate your HTML and JS (at least as far as I understand this topic). This is not only about navigation, but also about all these javascript interactions, such as accordions, sliders, etc.

I hope you guys can share some recommendations on these issues and help me.

thanks

Answer 1

The BEM methodology says that you should not use global selectors such as a tag selector, so use nav__item and nav__link.

The same story with an active modifier. You should not have global objects (you can use mixes, but this is a little different). Thus, the best way is to use nav__item - active (or nav__item_state_active in the classic BEM notation).

And BEM has a solution for JS, HTML (or templates) and virtually any other block technology.

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

And since the css technology of the navigation block applies the rules in a declarative way (you define some kind of selector, and all the nodes that match this selector, the style with these rules) is the same as you can describe the js of the nav block.

Please see http://xslc.org/jquery-bem/ , which is a jquery plugin that allows you to easily work with blocks in BEM.

And if you use some kind of build system, you can put all of these technologies in the same folder on the file system:

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

With this file structure, you can better understand what BEM is and try i-bem.js: http://bem.info/articles/bem-js-main-terms/

Answer 2

Actually, js in terms of bem is often seen as not such a good idea. For example, bem is great for locating and moving relationships in css horizontally, but from a js point of view, it’s hard to distract the logic in very complex applications.

In response.js, you can use it to name classes, and that it (we use it that way, and it works great!). I wrote a library to fix a naming problem.