在前端开发中，CSS 是不可避免的一部分。尽管 CSS 带来了很多便捷和美观的效果，但是 CSS 中常常出现的选择器的嵌套和滥用，让整个 CSS 文件的维护变得十分困难。这也正是出现了 BEM 命名规范的原因。而在使用 BEM 规范的同时，stylelint-selector-bem-pattern 是一个可以帮助我们检测 BEM 命名规范是否符合我们要求的 npm 包。
stylelint-selector-bem-pattern 是什么？
stylelint-selector-bem-pattern 是一个 stylelint 的插件，在使用 BEM 命名规范的项目中，以一种可扩展的方式编写过滤器（filers)，使用正则表达式匹配命名模式。 这样，我们就可以检测 CSS 是否正确使用 BEM 命名规范。
如何使用 stylelint-selector-bem-pattern？
安装
首先，我们需要安装 stylelint-selector-bem-pattern。在命令行中，执行下面的命令：
npm install stylelint-selector-bem-pattern
或者，如果你使用的是 yarn：
yarn add stylelint-selector-bem-pattern
配置
接下来，我们需要在 stylelint 的配置文件中添加我们的插件和规则配置。如果你还没有使用 stylelint，你需要 npm install 或 yarn add stylelint 以及配置文件。
在 stylelint 的配置文件中，添加以下代码：
-- -------------------- ---- -------
-
---------- -----------------------------------
-------- -
------------------------------ -
--------- ------
---------------- ------------
--------------------- -
---------- --------------------------------------------------------------
----------- ---------------------------------------------------------------------------------------------------------------------------------------
-
-
-
-在这个配置中，我们添加了一个名为 plugin/selector-bem-pattern 的规则，并使用 preset 属性指定了预设，这里选择了 "bem"。接下来，我们为 componentName 属性设置了一个值，这个值是我们的组件名称。对于 componentSelectors 属性，我们设置了两个可选属性 initial 和 combined。这是因为 BEM 命名规范有两种写法，"initial" 用于标记第一种写法，"combined" 则用于标记第二种写法。
在上面的配置中，我们使用正则表达式指定了两种写法的匹配规则。
使用
完成了配置之后，我们就可以在我们的代码中使用了。
以下是一个使用了 BEM 规范的 CSS 代码：
-- -------------------- ---- -------
------ -
----------------- -----
---------- -
------ -----
----------- -
----------------- -----
-
--------- -
-------- ---
-------- ------
------ ------
------- ------
-
-
-我们可以看到，在上述代码中，使用了 "initial" 的 BEM 命名法规，即使用了 "__" 和 "--" 来标记子元素和修饰符。
假设我们在这里写了一些不符合 BEM 命名规范的名称，那么 stylelint-selector-bem-pattern 将会自动在控制台输出警告信息。
总结
通过使用 stylelint-selector-bem-pattern，我们可以有效地帮助我们检测 CSS 是否符合 BEM 命名规范。使用正则表达式匹配模式，并且提供了两种类型的解决方案，大大简化了我们的代码检测过程，提高了代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66448