前言
在前端领域,BEM (Block Element Modifier) 是一种流行的 CSS 命名规范,它使得代码更具有可读性和可维护性。而在使用 Vue 时,我们通常使用的是单文件组件 (SFC),而 SFC 本身结构就符合 BEM 的设计原则。因此,使用 nuxt-bem-module 这个 npm 包可以方便快捷地实现 BEM 命名规范。
nuxt-bem-module 是什么?
nuxt-bem-module 是基于 nuxt.js 的项目中使用 BEM css 类名规范的一个 npm 模块,它可以帮助我们更便捷、更快速的将我们的样式组织成 BEM 结构。
nuxt-bem-module 的安装和配置
安装
npm install nuxt-bem-module
配置
在 nuxt.config.js 中添加以下配置:
-- -------------------- ---- ------- -------- - -- --- ------------------ -- --- -- ---- - ----------- - ---------- ----- -- ------- ---- ------------------- ----------- ----- -- ------- ---- ------------------- --------- ---- -- -------- ---- ----------------------- - -展开代码
配置完成后,我们可以在 Vue 的模板中使用如下语法生成 BEM 样式类名:
<template> <div class="button--close"> <span class="button--close__label"></span> <span class="button--close__icon"></span> </div> </template>
上面代码生成的 HTML 结构将是这样的:
<div class="button--close"> <span class="button--close__label"></span> <span class="button--close__icon"></span> </div>
此时,我们已经成功地将样式类名转换成 BEM 命名规范。
nuxt-bem-module 如何结合 SCSS 一起使用
虽然 nuxt-bem-module 可以让我们快速拥有 BEM 命名规范的样式类名,但我们还需要在样式表中对其进行使用。这时,我们可以借助 SCSS 进行代码结构化和重用。
为了结合 SCSS 和 nuxt-bem-module,首先需要安装以下依赖:
npm install node-sass sass-loader
接着,在 nuxt.config.js 中新增如下配置:
-- -------------------- ---- ------- ------ - -------- - ----- - --------------- - ------- --------------------------------------- --------- - -------- ------------------------- - -- --- -------- ----- -------- ------------------- - -- -- ----- - -------- -------------- - -- -- ------- -- ---------- ----- - -------- ------------------ - -- -- -------- --- -------- ---- --------------- ----- - - - - - - - -展开代码
这里我们可以看到,除了 @import "~nuxt-bem-module/src/styles/bem.scss";,我们还可以使用 SCSS 中的 mixin 和变量来实现样式模块化。
nuxt-bem-module 的灵活性
nuxt-bem-module 还在内置了灵活的 mixin,使得它不仅仅局限于在 Vue 中使用。假设我们需要在一个普通的 HTML/CSS 项目中使用 nuxt-bem-module,我们可以只需在 HTML 页面中引入 nuxt-bem-module 的 CSS 文件即可。具体操作如下:
首先,通过 npm 安装 nuxt-bem-module:
npm install nuxt-bem-module
接着,我们可以在 HTML 页面中添加如下代码:
-- -------------------- ---- ------- --------- ----- ------ ------ --- ----- ---------------- --------------------------------------------------------------- ----- ---------------- ----------------------------------- --- ------- ------ --- ------- -------展开代码
这样,我们就可以在任何 HTML/CSS 项目中使用 nuxt-bem-module。
总结
nuxt-bem-module 帮助我们更方便、更快速地实现了 BEM 命名规范,这使得我们的代码更具有可读性和可维护性。通过结合 SCSS,我们还可以实现样式模块化。nuxt-bem-module 的灵活性也使得它不仅仅局限于在 Vue 中使用。不过,还需要注意的是,nuxt-bem-module 只是帮助我们生成符合 BEM 命名规范的样式类名,我们还需要结合具体的项目进行实际的样式定义。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671ca30d09270238227e8