前端工程Bem架构及其封装

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

简介

首先认识一下什么是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
这里我就不具体讲解了，我把必要的了解说一下：

1. 嵌套规则 (Nested Rules)
2. 父选择器 &
3. 变量 $
4. @at-root
5. 占位符#{}
6. 定义混合指令 @mixin
7. 引用混合样式 @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>

结果