在前端开发的过程中，样式的组织和维护是一个很重要的问题。BEM(Block, Element, Modifier)是一种思想，通过它可以将样式分块、分类、维护。enb-bemify-templates是一个npm包，它可以帮助我们自动为HTML文件添加BEM命名。
前置条件
在使用enb-bemify-templates之前，请确保你已经了解了BEM的基本概念及使用方法，以及掌握了基本的npm包操作和enb构建工具的使用方法。
安装enb-bemify-templates
enb-bemify-templates通过npm包管理工具进行安装：
npm install enb-bemify-templates --save-dev
配置enb-bemify-templates
在enb配置文件中进行如下配置:
-- -------------------- ---- -------
--- ------- - ----------------------------------
-------------- - -------- -------- -
------------------------ -------- ------------ -
-------------------------------------------------------------- -
-------- -------
---
--------------------------------------------------------------
-------------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------
----------------------------------------------------
---------------------------------------------------
------------------------------ -------- ------------ -
----------
---------------------------------------- - ------------- -------- ----------- -------- --
---------------------------------------- - ------------- ------- ----------- ------- ---
---
---
--使用enb-bemify-templates
在需要添加BEM命名的HTML文件中，使用以下注释进行标记：
<!-- b:id_modifier1_modifier2__elem --> <!-- b:id_modifier1_modifier2__elem_modifier1_modifier2 -->
其中id为块的名称，modifier1、modifier2为块的修饰符，elem为元素的名称。当块或元素具有多个修饰符时，可以使用“-”来分隔，如some-block__elem_modifier1-modifier2。
在enb构建时，enb-bemify-templates会自动根据这些注释为HTML文件中的块和元素添加BEM命名，以便更好地维护样式。
示例
以下是基于enb-bemify-templates的一些示例代码：
<div class="button" <!-- b:button_round -->>
<span <!-- b:button__text -->>
Click me!
</span>
</div>-- -------------------- ---- -------
---- ----------------- ---- ----------- --- ---------------------------
---- ---- ------------------- ---
------------------------- ---- --------------------------- ---
---------------------- -----------------------
------ -------
------
---- ---- -------------------- ---
-------------------------- ---- ---------------------------- ---
----------------------- ------------------------
---- -------
------
-------- -------------------- ---- -------
---- ------------- ---- ------- ----
---- ---- ------------- ----
-------
------
---- ---- ----------------------- ----
-------
------
---- ---- ----------------- ---
---------------------- ----------- -----------------------
-------
------
------总结
使用enb-bemify-templates可以轻松地为HTML文件自动添加BEM命名，提高了样式的组织和维护效率。在使用过程中，我们需要注意注释的书写和enb配置的设置，以确保每个模块都能正确地添加BEM命名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7981e8991b448d8fce