npm 包 bem 使用教程

在前端开发中,BEM(Block Element Modifier)是一种常见的命名约定,它可以让你的 CSS 更加模块化、重用性更高、易于维护。而 npm 包 bem 的出现则可以更加方便地实现 BEM 命名规范。

什么是 BEM?

BEM 是一种命名约定,可以把页面分解成独立的部件,即块(Block)、元素(Element)、修饰符(Modifier)。它的命名规则是:

  • 块(Block):用两个短横线(--)作为分隔符,例如 .header
  • 元素(Element):用一个下划线(_)作为分隔符,例如 .header__logo
  • 修饰符(Modifier):用两个下划线(__)作为分隔符,例如 .header__logo--small

这种命名规则可以让 CSS 代码更加模块化,使得代码易于组织、理解和维护。

如何使用 npm 包 bem?

npm 包 bem 提供了一个命令行工具,可以让我们更方便地生成 BEM 命名的 CSS 代码。

安装 npm 包 bem

首先,我们需要安装 npm 包 bem,可以通过以下命令进行安装:

--- ------- -- ---

使用 npm 包 bem

npm 包 bem 的命令行工具主要有两个命令:bem createbem build

bem create

bem create 命令可以创建一个 BEM 命名的块(Block),例如:

--- ------ ----- ------

上面的命令会在当前目录下创建一个 header 目录,并生成以下文件:

-------
  ----------
  --------------
  ---------
  ---------------
  --------------

其中,header.css 是我们需要自己实现的 CSS 文件。

bem build

bem build 命令可以将 BEM 命名的 CSS 文件编译成普通命名的 CSS 文件,例如:

--- ----- -------------------

上面的命令会将 HEADER.BG_color.RED 这个 BEM 命名的 CSS 文件编译成 header__bg-color--red.css

使用示例

下面是一个具体的使用示例,我们将创建一个 BEM 命名的块(Block),并在其中定义一个元素(Element)和一个修饰符(Modifier):

--- ------ ----- ------

然后,我们需要进入 header 目录,编辑 header.css 文件,将以下代码粘贴到文件中:

-- ----- --
------- -
  ----------------- -----
  -------- -----
-

-- ------- --
------------- -
  -------- -------------
  --------------- -------
-

-- -------- --
-------------------- -
  ------ -----
-

保存文件后,我们可以使用 bem build 命令将 BEM 命名的 CSS 文件编译成普通命名的 CSS 文件:

--- ----- -----------------

上面的命令会将 HEADER.LOGO_SMALL 这个 BEM 命名的 CSS 文件编译成 header__logo--small.css

最后,在 HTML 中引入编译后的 CSS 文件即可:

----- ---------------- -------------------------------

总结

通过 npm 包 bem,我们可以更加方便地实现 BEM 命名规范。它可以让我们的 CSS 更加模块化,易于组织、理解和维护。在实际开发中,我们可以根据需要使用 bem createbem build 命令来创建和编译 BEM 命名的 CSS 文件。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/78238


猜你喜欢

  • npm 包 quickpeg 使用教程

    前言 在前端开发中,我们经常需要进行文本处理和解析,例如编译模板、解析数据等等。而这些操作都需要使用正则表达式或者手动解析,这使得开发变得繁琐而且容易出错。为了解决这个问题,我们可以使用类似于 ANT...

    5 年前
  • npm 包 doctor 使用教程

    前言 在前端开发过程中,我们经常会使用 npm 包来引入第三方库,大大提高了开发效率。但是,在使用过程中,我们也会遇到各种问题,比如包版本不兼容、依赖包冲突等等。而此时,我们可以使用 npm 包 do...

    5 年前
  • npm 包 doozer-build 使用教程

    简介 doozer-build 是一个基于 Gulp 构建系统的前端自动化工具集,它能够简化项目构建的任务,提供了一些有用的插件来优化工作流,并对项目进行优化。doozer-build 包含四个子任务...

    5 年前
  • npm 包 dist 使用教程

    在前端开发中,我们经常使用到 npm 包。npm 是 Node.js 的包管理器,提供了许多优秀的第三方库和工具供我们使用。 本文主要介绍 npm 包的 dist (distribution)使用教程...

    5 年前
  • npm 包 docpad-plugin-uglify 使用教程

    简介 docpad-plugin-uglify 是 docpad 平台上的一个 npm 包,用于压缩 JavaScript 文件。在前端开发中,压缩 JavaScript 文件可以有效地减少文件大小,...

    5 年前
  • npm 包 rework-move-media 使用教程

    在前端开发中,我们经常需要针对不同的屏幕尺寸和设备类型编写不同的样式。而 CSS 的 @media 规则可以帮助我们实现这一目标。但是,当我们需要针对某个屏幕尺寸修改某个选择器的位置时,就需要涉及到 ...

    5 年前
  • npm 包 discore-watcher 使用教程

    在现代 Web 开发中,使用第三方库、框架和工具已经成为日常。其中,npm 是最流行的 JavaScript 包管理器之一,为开发者提供了可以在项目中复用的模块化代码。

    5 年前
  • npm 包 dir-compress 使用教程

    什么是 dir-compress? dir-compress 是一个 npm 包,它提供了一种方便快捷的方式来压缩文件夹中的所有文件。它支持 Gzip 和 tar 格式,并具有灵活的配置选项。

    5 年前
  • npm 包 dicontainer 使用教程

    在前端开发中,使用第三方库和组件已经变成了家常便饭。而随着应用规模的不断扩大,前端代码的复杂度和耦合性也逐渐增强。这时我们就需要使用更加完善的依赖注入(DI)解决方案,来提高应用代码的可维护性和可测试...

    5 年前
  • npm 包 dist-js-css 使用教程

    前言 随着前端技术的不断发展,npm 包的使用已经成为了前端工程师不可或缺的一部分。而其中,dist-js-css 这个 npm 包的使用尤为重要,它可以帮助我们更快速、更方便地使用 js 或 css...

    5 年前
  • npm 包 vip-resp 使用教程

    什么是 npm 包? 我们在进行前端开发时,经常需要引入别人已经写好的代码或库,这些代码或库我们可以从 npm 上面下载,以便我们快速地进行开发。npm 是基于 Node.js 平台的包管理器,它提供...

    5 年前
  • npm 包 pm 使用教程

    什么是 npm? npm 是 Node.js 平台的官方包管理器。它是一个命令行工具,可以让开发者分享和重复使用代码,并控制代码之间的依赖关系。 什么是 pm? pm(package manager)...

    5 年前
  • npm 包 interceptor 使用教程

    在前端开发中,我们常常需要与后端进行接口交互,而且有时候需要对接口请求或返回进行一些处理。这时候,我们可以使用 npm 包 interceptor 来简化我们的代码。

    5 年前
  • npm 包 mredis 使用教程

    前言 Redis 是目前最流行的 key-value 存储数据库之一,是一个高性能的NoSQL数据库,被广泛应用于缓存、消息队列、计数器等应用场景。对于前端开发人员而言,redis 是一个必须掌握的技...

    5 年前
  • npm包dt-stream使用教程

    在前端开发中,我们可能会遇到需要在浏览器端实现数据流(stream)的需求,这时候就可以使用npm包dt-stream。它是一个轻量级的流式数据传输库,提供了基本的数据流操作功能,本文将详细讲解如何利...

    5 年前
  • npm 包 scopify 使用教程

    前言 在前端开发中,我们经常会使用 npm 包管理工具管理我们的依赖项。但是当我们的项目逐渐变得庞大时,我们可能会遇到一些依赖项的命名冲突问题。为了解决这个问题,我们需要使用一个叫做 scopify ...

    5 年前
  • npm 包 `dynamictemplate` 使用教程

    在前端开发中,动态渲染页面是非常常见的需求,而 dynamictemplate 正是为此而生的一个 npm 包。dynamictemplate 可以帮助我们通过配置文件,生成符合需求的模板,从而实现动...

    5 年前
  • npm包 easy-bake 使用教程

    1. 什么是npm包 easy-bake? easy-bake是一个拥有多种功能的Node.js模块,其中包括JS和CSS minifer、图片转换器等多种开发过程中会用到的工具。

    5 年前
  • npm 包 dusterjs 使用教程

    什么是 dusterjs? Dusterjs 是一个基于 Node.js 的模板引擎,提供快速、可靠的模板渲染功能,可以在前端页面渲染数据。 安装 dusterjs 可以通过 NPM 进行安装: -...

    5 年前
  • npm 包 daemonize-process 使用教程

    在前端开发中,我们经常需要启动多个进程来完成不同的任务。然而,在有些情况下,我们需要将这些进程转化为守护进程,以确保程序能够在后台稳定地运行。而 npm 包 daemonize-process 就是一...

    5 年前

相关推荐

    暂无文章