BEM 是一种前端规范，它的核心是将 HTML 类名划分为三部分：Block、Element、Modifier，常常简称为 BEM。使用 BEM 能够让代码具有高可读性和可维护性，不过 BEM 命名法在实际应用中也存在着一些问题。其中，块与块之间的嵌套和拓展等操作会导致类名冗长难以维护，而 postcss-plugin-bem-escape-block-name-less-modifier 是一个 npm 包，可以为实际开发者们提供解决此问题的途径。
前言
对于 BEM 命名法的初学者而言，它似乎是一种十分简单的开发规范。不过，在实际应用中，BEM 的块、元素、修饰符的名称会非常臃肿而且死板，使用固定的规则来命名每个名称时，创建中大型的样式表就会显得非常的艰难。
在这个时候，postcss-plugin-bem-escape-block-name-less-modifier 就应运而生了。它提供了一种更为简单的、针对 BEM 命名法的优化方案。
安装和使用
安装 postcss-plugin-bem-escape-block-name-less-modifier npm 包：
npm install postcss-plugin-bem-escape-block-name-less-modifier --save-dev
安装完后，需要在 postcss 的插件列表中进行配置：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------------------------------ - -------------------------------------------------------------- --------- --------------------------------- ------------------------- - ----- ------------------ --- ------------------ ---------------- -- - ------------------------------------ ------------ ---------------- -- - --------------------- ---
优化方案
在使用 BEM 命名法时，默认情况下需要为每个元素和修改器创建三个不同的 CSS 类名。不过，这种实现方式不仅很难理解和使用，而且 UI 部分的 HTML/CSS 结构也变得难以构建。因此，postcss-plugin-bem-escape-block-name-less-modifier 提供了一种针对 BEM 命名法的更好的方式，可以让我们消除来自 CSS 中小组件删除和替换的坑。
该插件的优势在于为修改器自动生成块名称（block name）、嵌套、类修饰符和键，并保持小组件对块的干净分离。
代码示例
假设我们有一个简单的 HTML 资源：
<div class="header">
<span class="header-logo"></span>
<nav class="header-nav">
<a class="header-nav-item" href="#">Overview</a>
<a class="header-nav-item" href="#">Dashboard</a>
<a class="header-nav-item" href="#">Settings</a>
</nav>
</div>可以使用 BEM 命名法将其重构如下：
<div class="header header--dark-theme">
<span class="header__logo"></span>
<nav class="header__nav">
<a class="header-nav__item" href="#">Overview</a>
<a class="header-nav__item" href="#">Dashboard</a>
<a class="header-nav__item" href="#">Settings</a>
</nav>
</div>然后，通过 LESS/CSS 为具体的类定义样式：
-- -------------------- ---- -------
------- -
------------- -
----------------- -----
------ -----
------------- -
------ --------
-
------------ -
----------------- -
------ -----
-
-
-
-使用 postcss-plugin-bem-escape-block-name-less-modifier，可以等价地使用以下代码来为具体的类定义样式：
-- -------------------- ---- -------
----------- -
----------------- -----
------ -----
------- -
------ --------
-
------ -
------- -
------ -----
-
-
-这看起来似乎更加复杂。不过，如果你仔细观察会发现，这其实是一种非常简洁的方式，它避免重复块、元素和块修饰符的标识符，并使用该插件自动生成的类名称代替这些标识符。
总结
postcss-plugin-bem-escape-block-name-less-modifier 提供了一种在使用 BEM 命名法时处理中大型样式表的可行方案，能帮助我们消除 CSS 中小组件删除和替换的坑。通过避免重复块、元素和块修饰符的标识符，并使用该插件自动生成的类名称代替这些标识符，可以避免创建难以维护和扩展的 CSS 类名。如果您使用的是 BEM 命名法且想优化样式表，请尽快尝试使用 postcss-plugin-bem-escape-block-name-less-modifier。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596081e8991b448d6ce8