在前端开发中，CSS 是必须掌握的技能之一。而在 CSS 中 BEM 命名规范是一种非常流行的 CSS 命名方法，它可以让我们的 CSS 代码更加规范化和易于维护。但是，在一些复杂的场景下，BEM 命名规范也无法完全满足我们的需求。这时候就需要一些工具来辅助我们进行命名。
在这篇文章中，我们将介绍一个 npm 包 —— getlocalidentbem。这是一个方便的工具，可以帮助我们更高效、更规范地进行命名，尤其适用于大型项目。
什么是 getlocalidentbem？
getlocalidentbem 是一个实用的 npm 包，可以为我们的 CSS 类名生成本地唯一的 BEM 标识符。它可以自动生成我们需要的 BEM 命名，并且在非常复杂的场景下也能够保证 CSS 类名唯一性，避免了出现重名的情况。
安装和使用
安装
可以通过 npm 安装 getlocalidentbem，安装命令如下：
npm install getlocalidentbem
使用
getlocalidentbem 的使用非常简单，只需要将其引入到项目中即可使用。一般情况下，我们会将其集成到我们的前端构建工具中，以便自动化生成 CSS 类名。
我们可以通过以下代码来使用 getlocalidentbem：
var getLocalIdentBEM = require('getlocalidentbem');
var css = require('css');
var locals = {};
var options = {};
var result = css.parse('.button { font-size: 12px; }');
console.log(getLocalIdentBEM(locals, options, result.stylesheet.rules[0].selectors[0]));这个例子中，我们通过 CSS 解析器解析了一个 CSS 样式，然后将其中的选择器传递给 getLocalIdentBEM 函数。在这个例子中， getLocalIdentBEM 会为选择器生成一个本地 BEM 标识符，并将其返回。
getlocalidentbem 的配置选项
getlocalidentbem 提供了一些可配置的选项，以满足不同的 CSS 命名需求。下面是这些选项的详细介绍：
- prefix：为生成的 BEM 类名添加前缀
- elementSeparator：元素分隔符，默认为 "__"
- modifierSeparator：修改器分隔符，默认为 "--"
- ignoreModificationsContaining：忽略某个关键字的修改器，哪怕它带有该关键字
getlocalidentbem 的示例代码
以下是一段使用 getlocalidentbem 来为按钮添加 BEM 类名的示例代码：
-- -------------------- ---- ------- --- ---------------- - ---------------------------- --- --- - --------------- --- ------ - --- --- ------- - - ------- ----------- ------------------------------ --------- -- --- ------ - ------------------ - ---------- ----- ---- ------------------------------------ -------- ------------------------------------------ -- ------ ---------------- --
在这个例子中，我们在 options 中设置了一个前缀和一个忽略修改器的选项。当 getLocalIdentBEM 被调用时，它会在 locals 中为我们存储生成的唯一标识符。
总结
本文介绍了一个非常实用的 npm 包 —— getlocalidentbem，并展示了如何使用它来生成唯一的 BEM 类名。我们还介绍了一些可配置的选项，以使 BEM 类名更加灵活和适应不同的 CSS 命名需求。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2281e8991b448d7c6a