Bem.JS - A Small JavaScript Library for DOM Manipulations According to the BEM Methodology

Evgeny A. Koryakin

5.00/5 (4 votes)

26 Nov 2014MIT1 min read

8.3K

Use Bem.JS library to create CSS classes according to the BEM methodology and add, remove, modify CSS classes of DOM elements or select DOM elements by BEM-like CSS classes

Introduction

Nowadays, the BEM methodology is gaining more and more popularity among web developers because it gives the project a great deal of flexibility and makes it easier in the future to develop and maintain the project.

There already exist tools aimed at developing web applications in accordance with the BEM methodology, but usually they are quite complex to be used fast and easy or vice-versa are very simple and do not deliver the desired functionality.

Bem.JS, in turn, is a small and functional library with full and detailed API documentation and it depends only on jQuery version 1.4.0 or higher.

Using Bem.JS

Bem.JS allows to do the following:

Create BEM-like CSS classes of a block, an element, a block's modifier or an element's modifier.
Select blocks and elements as jQuery objects from DOM.
Manipulate blocks and elements and their CSS classes according to the BEM methodology. For example, add, remove or edit a block's or element's modifier, check if a block or element has a modifier, check if a DOM element is a block or element and other.

Here are some examples. More examples and detailed API documentation can be found here.

Creating BEM-like CSS classes

HTML

// Creating a CSS class of a block.
var blockCssClass = bem.block("product", "is-selected is-focused size_xs");

// Result: "product product_is-selected product_is-focused product_size_xs"

// Creating a CSS class of an element.
// var elementCssClass = bem.element("product", "name", "is-selected is-focused size_xs");

// Result:
// "product__name product__name_is-selected product__name_is-focused product__name_size_xs"

Selecting blocks

HTML

<html>
<head>
    <script type="text/javascript">
        var $blocks = bem.getBlock("product", "is-selected");
       
        // Result:
        // The $blocks variable will contain two blocks with identifiers product2 and product3.  
    </script>
</head>
<body>
    <div id="product1" class="product"></div>
    <div id="product2" class="product product_is-selected"></div>
    <div class="offer"></div>
    <div id="product3" class="product product_is-selected"></div>
</body>
</html>

Selecting blocks from a jQuery object

HTML

<html>
<head>
    <script type="text/javascript">
        var $blocks = $(".products").getBlock("product", "is-selected");
       
        // Result:
        // The $blocks variable will contain two blocks with identifiers product3 and product4. 
    </script>
</head>
<body>
    <div id="product1" class="product"></div>
    <div class="products">
        <div id="product2" class="product"></div>
        <div id="product3" class="product product_is-selected"></div>
        <div class="offer"></div>
    </div>
    <div class="products">
        <div id="product4" class="product product_is-selected"></div>
    </div>
    <div id="product5" class="product product_is-selected"></div>
</body>
</html>

Selecting elements

HTML

<html>
<head>
    <script type="text/javascript">
        var $elements = bem.getElement("product", "name", "is-selected");
       
        // Result:
        // The $elements variable will contain two elements with identifiers name2 and name3. 
    </script>
</head>
<body>
    <div class="product">
        <div id="name1" class="product__name"></div>
        <div id="name2" class="product__name product__name_is-selected"></div>
    </div>
    <div class="product">
        <div id="name3" class="product__name product__name_is-selected"></div>
        <div class="product__price"></div>
    </div>
</body>
</html>

Selecting elements from a jQuery object

HTML

<html>
<head>
    <script type="text/javascript">
        var $elements = $(".product").getElement("name", "is-selected");
       
        // Result:
        // The $elements variable will contain two elements with identifiers name3 and name4. 
    </script>
</head>
<body>
    <div id="name1" class="product__name"></div>
    <div class="product">
        <div id="name2" class="product__name"></div>
    </div>
    <div class="product">
        <div id="name3" class="product__name product__name_is-selected"></div>
        <div class="product__price"></div>
    </div>
    <div class="product">
        <div id="name4" class="product__name product__name_is-selected"></div>
    </div>
    <div id="name5" class="product__name product__name_is-selected"></div>
</body>
</html>

Adding modifiers

HTML

<html>
<head>
    <script type="text/javascript">
        $(".product, .product__name").addModifier("is-selected size_xs");
    </script>
</head>
<body>
    <div class="product"></div>
        <div class="product__name"></div>
        <div class="product__price"></div>
    </div>
</body>
</html>

Result

HTML

<html>
<body>
    <div class="product product_is-selected product_size_xs"></div>
        <div class="product__name product__name_is-selected product__name_size_xs"></div>
        <div class="product__price"></div>
    </div>
</body>
</html>

Checking modifiers

HTML

<html>
<head>
    <script type="text/javascript">
        var hasModifier = $(".product").hasModifier("is-selected");

        // Result: true
    </script>
</head>
<body>
    <div class="product product_is-selected"></div>
</body>
</html>

References

Bem.JS API documentation and examples

License

This article, along with any associated source code and files, is licensed under The MIT License