vue3中配置bem样式架构

BEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写。这种命名方法让CSS便于统一团队开发规范和方便维护。

BEM的组成

Block 块独立实体，独立的意义
Element 元素block的一部分，没有独立的意义。语意上和block有关系
Modifier 修饰符block或element上的标记。使用他来改变外观或行为

上代码

首先我们需要再vue3项目中创建一个用于保存bem样式文件的地方

其次，bem.scss内文件代码为

// bem 架构
$namespace: "vat" !default; //   命名空间（可自定义，看心情）
$block-sel: "-" !default; //    块级元素与命名空间之间的连接符（可自定义，看心情）
$element-sel: "__" !default; //    元素与块级元素之间的连接符（可自定义，看心情）
$modify-sel: "--" !default; //    修饰符与元素之间的连接符（可自定义，看心情）

// 定义混入指令
@mixin block($block) {
  // 创建一个类名变量
  $B: #{$namespace + $block-sel + $block};
  //   取动态类名赋值样式
  .#{$B} {
    @content; //  占位符,用于填写真实想要开发的样式
  }
}

// 定义混入指令
@mixin element($element) {
  // 使用@at-root和#{&}可以引用父（在Sass中总是引用父选择器）和插值，可以嵌套，做一些其他的事情
  @at-root {
    #{& + $element-sel + $element} {
      @content; //  占位符
    }
  }
}

// 定义混入指令
@mixin modify($modify) {
  // 使用@at-root和#{&}可以引用父（在Sass中总是引用父选择器）和插值，可以嵌套，做一些其他的事情
  @at-root {
    #{& + $modify-sel + $modify} {
      @content;//  占位符
    }
  }
}

// 定义混入指令
@mixin bfc {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

bem文件我们写好了，接下来还需要配置一下才能全局生效
找到配置文件

 css: {
  preprocessorOptions: {
      scss: {
          additionalData: '@import "./src/styles/bem.scss";'
      }
  },

这里可以参考vite官方文档来配置

然后来看看页面代码的实际使用方式

效果图

到此为止，这里的bem样式架构算是完成了，这样的命名规范真的很舒服，很简洁，维护起来也很方便

再见，再见。。。