在前端开发中，优秀的代码组织方式十分重要。BEM 是一种广泛使用的前端 CSS 命名约定，它可以让你的代码更加有组织性和可维护性。而 bem2ng 就是一个方便的 npm 包，可以帮助你更加轻松地实现 BEM 命名规范。
为什么需要 BEM 命名约定？
BEM（Block-Element-Modifier）是一种 CSS 命名约定，最早由 Yandex 团队提出。它将页面分为若干个块（Block），每个块再由若干个元素（Element）组成。块和元素的命名使用双下划线（__）进行分割，例如 header__logo。如果元素需要改变样式，可以使用修改器（Modifier）来实现，例如 header__logo--blue，其中修改器使用双横线（--）进行分割。BEM 命名规范可以让 CSS 类名更加有意义，易于理解和修改。
什么是 bem2ng？
bem2ng 是一个基于 BEM 的命名规范的 npm 包，它可以帮助你更加轻松地进行 BEM 命名，同时还提供了一些工具和辅助函数。它包含了 BEM 命名规范的大部分内容，并且可以和 Angular、React 等框架结合使用。
如何使用 bem2ng？
首先，你需要安装 bem2ng：
npm i bem2ng
接下来，你可以使用 bem2ng 提供的辅助函数来生成 BEM 的类名，例如：
-- -------------------- ---- ------- ------ - -- -- - - ---- --------- ----- --------- - ----------- ----- ----------- - ---------- ----------- ----- ------------ - ---------- ----------- -------- ----------------------- -- ---------- ------------------------- -- ------------------- -------------------------- -- --------- --------------- ----------------------
在这里，我们使用了 bem2ng 提供的三个辅助函数 b、e 和 m 来生成 BEM 命名。其中，b 函数用于生成块名，e 函数用于生成元素名，m 函数用于生成修改器名。生成的类名将包含 BEM 所有三个部分的内容。
除了以上三个辅助函数，bem2ng 还提供了其他一些有用的函数，例如过滤函数 filterClassNames、排序函数 sortClassNames 等，以及与 Angular 和 React 框架相关的一些工具。如果需要了解更多信息，可以查看 bem2ng 的官方文档。
总结
BEM 命名规范可以让你的 CSS 类名更加有意义，易于维护和修改。bem2ng 是一个非常方便的 npm 包，可以帮助你更加轻松地进行 BEM 命名，并提供了一些有用的工具和辅助函数。使用 bem2ng 可以让你的前端代码更加优雅，有助于提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e7481e8991b448dbd1f