Yandex BEM/OOCSS

If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes.

In short, BEM introduces three concept types for CSS classes: Block, Element and Modifier. Block is a some sort of a namespace for a semantic sections of HTML page, for example, search-form. Element is a part of section, for example, search-form__query-string. Modifiers define variations of block and elements: search-form_wide or search-form_narrow. Elements in class names are separated with __ (double underscore) and modifiers are separated with _ (single underscore).

While BEM/OOCSS is a great way to maintain and re-use CSS, it may be very tedious to write these class names in plain HTML, even with help of Emmet abbreviations. You have to write the same block or element name in every element of abbreviation:

form.search-form.search-form_wide>input.search-form__query-string+input:s.search-form__btn.search-form__btn_large

The bem filter allows you to make abbreviation a bit sorter:

form.search-form._wide>input.-query-string+input:s.-btn_large|bem

How it works

BEM filter introduces a few class name prefixes for concept types: __ or - as element prefix and _ as modifier prefix. Whenever you begin the class name with one of these prefixes, filter will resolve the rest parts for you:

• if you start class name element prefix, filter will resolve block name from parent node;
• if you start class name with modifier prefix, filter will resolve block name and/or element name from current or parent nodes;
• if you use both element and modifier prefixes, filter will resolve block name from parent node and output both “unmodified” and “modified” classes on element;
• if you use multiple element prefixes, filter with resolve block name from nth parent node.

Here are a few examples:

<div class="b b_m"></div>

<div class="b b_m1 b_m2"></div>

<div class="b">
    <div class="b b_m"></div>
</div>

<div class="b1">
    <div class="b2 b2_m1">
        <div class="b2__e1"></div>
        <div class="b1__e2 b1__e2_m2"></div>
    </div>
</div>

Remember that you can always make bem filter a default one for HTML syntax.