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
// 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>
<head>
<script type="text/javascript">
var $blocks = bem.getBlock("product", "is-selected");
</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>
<head>
<script type="text/javascript">
var $blocks = $(".products").getBlock("product", "is-selected");
</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>
<head>
<script type="text/javascript">
var $elements = bem.getElement("product", "name", "is-selected");
</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>
<head>
<script type="text/javascript">
var $elements = $(".product").getElement("name", "is-selected");
</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>
<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>
<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>
<head>
<script type="text/javascript">
var hasModifier = $(".product").hasModifier("is-selected");
</script>
</head>
<body>
<div class="product product_is-selected"></div>
</body>
</html>
References
This member doesn't quite have enough reputation to be able to display their biography and homepage.
Submit an article or tip
