BEM

我们知道网站布局是由 head、body、foot 三部分组成；根据这个结构 Yandex 团队提出一种css命名的方法-BEM,首先 BEM 是一个分层系统，它把我们的网站分为三层，这三层正好对应着BEM这三个英文单词的简写 block, element, modifier，分别为 块层、元素层、修饰符层

通过熟悉ui库来说明一下bem的规范

ELementUi中的定义类，都是以el为开头，这个就是他的namespace，-来定义这是一块区域，代表BEM中B
块区域里面的内容用过__双下划线去连接，代表BEM中E
BEM中M代表就是修饰的意思，ELementUi是通过--双横杆去连接

编写bem

首先我们在vue中新建bem.scss文件，需要按照一下预处理器，npm yarn pnpm这三个都可以，这里使用pnpm i sass,

@content就类似于插槽，
!default没有重新赋值的话，就使用定义好的值、
@at-root取消嵌套，避免重复使用

$namespcae: 'xz' !default;
$block-sel: "-" !default;
$elem-sel: "__" !default;
$mod-sel: "--" !default;
@mixin b($block) {
    $B: #{$namespcae + $block-sel + $block};
    .#{$B} {
        @content
    }
}
@mixin e($el) {
    $selector: &;
    @at-root {
        #{$selector + $elem-sel + $el} {
            @content
        }
    }
}
@mixin m($m) {
    $selector: &;
    @at-root {
        #{$selector + $mod-sel + $m} {
            @content
        }
    }
}

在vite.config.ts文件中配置，在preprocessorOptions实例中定义scss方法，之后就可以在vue中全局使用，这就是BEM的流程，页面的效果也出来了

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

vue中style通过@include去导入使用，面向css对象的开发，分别对应的是BEM，分别为 块层、元素层、修饰符层


@include b(test) {
  color: red;
  @include e(innel) {
    color: aqua;
  }
  @include m(success) {
    color: goldenrod;
  }
}

页面展示的效果也出来了，也是对应BEM的结构，之后开发可以通过这种结构快速开发一套流程出来

编写bem架构和全局sass文件

BEM

编写bem