随着前端开发的发展，CSS methodologies（CSS 风格指导思想）变得越来越重要，它们可以使我们的 CSS 代码更加规范、易于维护和可扩展。BEM 是其中一种广受欢迎的风格指导方法，通常被用于大型 Web 项目开发。在这篇文章中，我们将介绍如何使用 npm 包 broccoli-bem 来实现 BEM 风格的开发和构建工具。
什么是 BEM？
BEM 是 Block、Element、Modifier 的缩写，是一种构建易于维护和扩展的 Web 界面的方法。每个 “块”（block）都是由 CSS 类名为 .block-name 的元素组成的，而每个 “元素”（element）都是属于某个块内的元素，其类名类似于 .block-name__element-name，最后，每个 “修饰符”（modifier）都是描述某个块或元素的状态或变化的类名，例如 .block-name__element-name--modifier。
以下是一个简单的示例，BEM 的类命名约定是用横线命名法。
-- -------------------- ---- -------
---- ---------------
---- ---------------------------
--- ---------------------------------
--- ---------------------------------------- ----------------------
--- ---------------------------------------- -----------------------
--- ---------------------------------------- -------------------------
-----
------
------ 什么是 broccoli-bem ？
broccoli-bem 是一个 npm 包，它为 BEM 风格的代码提供了自动化构建工具。它基于 broccoli 构建工具，是一种静态文件生成器，旨在使您的前端项目能够更加可维护，更加灵活。
使用 broccoli-bem 构建你的 BEM 项目
首先，确保您已经安装了 node.js 和 npm。
创建一个新的 node.js 项目并在其根目录中运行以下命令，安装 broccoli-bem：
npm install broccoli-bem --save-dev
在根目录下创建一个名为
Brocfile.js的文件，并输入以下代码：-- -------------------- ---- ------- --- -------- - -------------------- --- ---------- - ------------------------ --- ---- - ----------------- - ---------- ----------------- --- -------------- - ---------- - ------ -------------------- -
您需要创建一个
src文件夹用于存储您的项目源代码，这个文件夹包含您的 BEM 样式和其他前端资源（如 JavaScript 和图像）。在上面的代码中，我们使用
bemBuilder函数创建了一个名为tree的 broccoli 树，该树允许我们在src目录的 BEM 文件中引用块，元素和修饰符。我们还将一个 JSON 文件blocks.json传递给bemBuilder函数，它包含了我们在 BEM 文件中使用的所有的类名和结构信息。以下是
blocks.json的常规格式：-- -------------------- ---- ------- - ------------ --- --------- - ------------- - ------- ------------- ----------- - --------------- - ------- --------------------------- --------------- - ----------------- ------------------------------------------- ----------------- ------------------------------------------ - - -- --------------- - ----------------- ----------------------------- ----------------- ---------------------------- - - - -下一步，我们需要告诉 broccoli-bem 如何将 BEM 文件转换为 CSS 文件，可以将以下内容添加到 Brocfile.js 中：
var stylesTree = new BemPreprocessor( tree, 'src', // source directory 'path/to/output/dir' // output directory );
运行
broccoli serve命令来启动一个 web 服务器，通过http://localhost:4200/访问您的 BEM 项目。broccoli serve
现在，您的 broccoli-bem 项目已经成功启动，该项目将自动生成您的 CSS 文件并将其输出到您的目标目录中。
示例代码
以下是一个示例 BEM 文件的目录结构：
-- -------------------- ---- ------- ---- --- ----------- --- ----- - --- --------- - --- ---------- - --- ------- - - --- ------------ - - --- ------------- - --- ---------- --- ----------
在这个例子中，我们创建了一个名为 block 的 BEM 块。这个块由 block.css、block.html、_block.css 和一个名为 element 的 BEM 元素组成。元素 element 又由一个 _element.css 和一个 _element.html 组成。我们还创建了一个 blocks.json 文件，它描述了我们在 BEM 文件中使用的所有类名和结构信息。
以下是 blocks.json 中 block 的段落：
-- -------------------- ---- -------
--------- -
-------- -
------- --------
----------- -
---------- -
------- -----------------
--------------- --
-
--
--------------- --
-
-现在，block.css 中定义了 block 的样式：
-- -------------------- ---- ------- ------ - ------- --- ----- ------ -------- ----- - --------------- - ----------- ----- ------ ------ -
index.html 包含了 block 的 HTML 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---------------
----- ---------------- ------------------
-------
------
---- --------------
---- -----------------------
------- ------------
------
------
-------
-------最后，brocfile.js：
-- -------------------- ---- ------- --- -------- - -------------------- --- ---------- - ------------------------ --- --------------- - ------------------------------------- --- ---- - ----------------- - ---------- ----------------- --- --- ---------- - --- ---------------- ----- ------ -- ------ --------- -------------------- -- ------ --------- -- -------------- - ---------- - ------ -------------------------- --
启动该项目：
broccoli serve
现在我们在浏览器中打开 http://localhost:4200 ，应该可以看到我们的 block 块已经成功应用，block 的 HTML 代码被呈现为一块黑色边框和蓝色背景的方块。
结论
在这篇文章中，我们介绍了 BEM 风格指导思想的基础知识，并了解了如何使用 npm 包 broccoli-bem 来构建 BEM 风格的 Web 项目。我们还提供了一个示例代码，以帮助您了解如何实现和使用 broccoli-bem。请记住，BEM 可以使您的代码更容易维护和扩展，broccoli-bem 则是实现 BEM 的一个很好的工具，它可以帮助您更有效地开发代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde527c