作者：AI助手
前言
在前端开发中，BEM 是一种常见的 CSS 设计模式，用于使 CSS 类更好地组织和管理。但是，手动编写 BEM 类似的 CSS 类是一份繁琐的工作，因此使用 npm 包 easy-bem 可以更方便地实现此目的。
easy-bem 是一个小型的 npm 包，它提供了一种简便的方法来生成 BEM 风格的 CSS 类。 在这篇文章中，我们将学习什么是 easy-bem，如何安装和使用它。
安装
要安装 easy-bem，您需要在您的项目中使用 npm。如果您已经配置好 npm，请运行以下命令来安装 easy-bem：
npm install easy-bem
安装后，您可以通过以下方式在应用程序中使用 easy-bem：
const bem = require('easy-bem');或者，如果您正在使用 ES6+：
import bem from 'easy-bem';
基本使用
使用 easy-bem 生成 BEM 风格的 CSS 类很简单。首先，我们需要提供块名称（block name），元素名称（element name）和修饰符名称（modifier name）。
假设您有类似下面的 HTML：
<div class="card"> <img class="card__image" src="..."> <h2 class="card__title">Title</h2> <p class="card__description">Description</p> </div>
要为这些元素生成 BEM 风格的类，您可以使用以下方式：
const block = 'card';
const bemClass = bem(block);
const imageClass = bemClass('image');
const titleClass = bemClass('title');
const descriptionClass = bemClass('description');这将生成以下 CSS 类：
-- -------------------- ---- ------- ----- - -- ----- ------ -- - ------------ - -- ------- ------ -- - ------------ - -- ------- ------ -- - ------------------ - -- ------- ------ -- -
现在，我们可以使用 imageClass、titleClass 和 descriptionClass 来应用 CSS 样式，从而更好地组织和管理我们的样式。
在前面的示例中，我们只使用了块名称和元素名称。现在，假设我们有下面这样的 HTML：
<button class="button button--primary">Primary</button> <button class="button button--secondary">Secondary</button>
您可以使用类似以下的方式为按钮添加修饰符：
const block = 'button';
const bemClass = bem(block);
const primaryClass = bemClass({ modifier: 'primary' });
const secondaryClass = bemClass({ modifier: 'secondary' });这将生成以下 CSS 类：
-- -------------------- ---- ------- ------- - -- ----- ------ -- - ---------------- - -- -------- ------ -- - ------------------ - -- -------- ------ -- -
现在，我们可以使用 primaryClass 或 secondaryClass 来为按钮添加适当的修饰符。
高级用法
在使用 easy-bem 时，还有一些高级用法可以使用。
子块名称
有时，您可能需要使用子块名称（sub block name）来更好地组织您的 CSS 类。子块名称可以通过以下方式添加到类中：
const block = 'card';
const bemClass = bem(block);
const borderClass = bemClass({ element: 'border' });
const imageClass = bemClass({ element: 'image', modifier: { subBlock: 'rounded' } });这将生成以下 CSS 类：
-- -------------------- ---- ------- ----- - -- ----- ------ -- - ------------- - -- ------- ------ -- - ------------ - -- ------- ------ -- - ------------------------------- - -- -------- ------ -- -
继承
有时，元素可以继承另一个元素的修饰符。在 easy-bem 中，这可以通过以下方式实现：
const block = 'card';
const bemClass = bem(block);
const titleClass = bemClass('title');
const subtitleClass = bemClass('subtitle', { inheritModifiers: titleClass });这将生成以下 CSS 类：
-- -------------------- ---- ------- ----- - -- ----- ------ -- - ------------ - -- ------- ------ -- - --------------- - -- ------- ------ -- - ------------------------------------- - -- -------- ------ -- -
多个块
如果您有多个块需要添加 BEM 类，您可以使用以下方式：
const blocks = ['card', 'button'];
const bemClasses = blocks.map(block => bem(block));
console.log(bemClasses[0]('image')); // .card__image
console.log(bemClasses[1]({ modifier: 'primary' })); // .button--primary结论
在本文中，我们了解了 npm 包 easy-bem，它提供了一种简单的方法来生成 BEM 风格的 CSS 类。我们学习了如何安装和使用 easy-bem，并了解了一些高级用法。通过使用 easy-bem，我们可以更轻松地组织和管理我们的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6df0daa9b7065299ccb9c8