前端工程Bem架构及其封装

2026/9/23 17:29:34 拓冰建站浏览量

文章目录

- 简介
- 语法
- 在vue3项目中引用
- - sass
  - 创建bem.scss文件
  - 修改vite.config.ts
  - vue文件中使用
  - 结果

这是我学习记录的笔记，如有不正，欢迎补充

简介

首先认识一下什么是bem架构？BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

语法

在这里插入图片描述
看一下其中的class类，el-divider el-divider–horizontal m-0
这里加入一个类el-divider__inner

el表示namespace（命名空间）
-（）表示block（块）
__（）双下划线表示element（元素）
-- 双-号表示modidier（修饰符）

在vue3项目中引用

sass

在引用之前需要先了解一下sass
这里我就不具体讲解了，我把必要的了解说一下：

嵌套规则 (Nested Rules)
父选择器 &
变量 $
@at-root
占位符#{}
定义混合指令 @mixin
引用混合样式 @include
这些可以在官方文档中查看，我想只要学过css，入门sass也是喝喝水了。

创建bem.scss文件

这里面写我们的bem架构规则。

//注意：这里的xm是自定义的namespace
$namespace: "xm" !default;
$block-sel: "-" !default;
$elem-sel: "__" !default;
$mod-sel: "--" !default;@mixin b($block) {$B: #{$namespace + $block-sel + $block};.#{$B} {//占位符，替代编写的css样式@content;}
}@mixin e($elem) {$seletor: &;$E: #{$seletor + $elem-sel + $elem};@at-root {//跳出父级作用域#{$E} {//占位符，替代编写的css样式@content;}}
}@mixin m($modifier) {$seletor: &;$M: #{$seletor + $mod-sel + $modifier};@at-root {#{$M} {//占位符，替代编写的css样式@content;} } 
}

这个文件可以直接引用到项目中，改一下命名空间就行。

修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {scss: {//bem文件的位置additionalData: `@import "./src/bem.scss";`}}}
})

vue文件中使用

<template><div class="xm-test">gunala<button class="xm-test--success">成功</button></div>
</template>//标注lang = "scss"<style lang="scss">//test是b的参数，表示拿到xm-test类@include b(test){color:red;//嵌套//success是m的参数，表示拿到的是xm-test--success@include m(success){color: green;}}</style>

结果

在这里插入图片描述

建站实战干货