Yandex BEM/OOCSS

如果您以 OOCSS 风格，特别是 Yandex BEM 风格编写 HTML 和 CSS 代码，那么您会喜欢这个过滤器。它提供了一些别名，并能在类名中自动插入常见的块（Block）和元素（Element）名称。

简而言之，BEM 为 CSS 类引入了三种概念类型：块（Block）、元素（Element）和修饰符（Modifier）。块是 HTML 页面语义化部分的一种命名空间，例如 search-form。元素是块的一部分，例如 search-form__query-string。修饰符定义了块和元素的变体：search-form_wide 或 search-form_narrow。类名中的元素使用 __（双下划线）分隔，修饰符使用 _（单下划线）分隔。

尽管 BEM/OOCSS 是维护和重用 CSS 的绝佳方式，但在纯 HTML 中编写这些类名可能会非常繁琐，即使有 Emmet 缩写的帮助也是如此。您必须在缩写的每个元素中重复编写相同的块或元素名称。

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

bem 过滤器允许您使缩写变得更短。

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

工作原理

BEM 过滤器为这些概念类型引入了一些类名前缀：__ 或 - 作为元素前缀，_ 作为修饰符前缀。每当您以这些前缀之一开始类名时，过滤器就会为您解析其余部分：

• 如果您以元素前缀开始类名，过滤器将从父节点解析块名称；
• 如果您以修饰符前缀开始类名，过滤器将从当前或父节点解析块名称和/或元素名称；
• 如果您同时使用元素和修饰符前缀，过滤器将从父节点解析块名称，并在元素上输出“未修饰”和“已修饰”两个类；
• 如果您使用多个元素前缀，过滤器将从第 n 个父节点解析块名称。

以下是几个示例：

<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>

请记住，您随时可以将 bem 过滤器设置为 HTML 语法的默认过滤器。