bem架构

????????bem是block element modify的简称,是css类名的一种书写规范，block表示为页面的的类选择器声明一个基底(命名空间)，给他命名之后，页面所有标签的类选择器都以这个名字为基底（比如组件库element ui的类选择器就以el为基底），element表示页面的所有标签元素,给他的类选择器命名时可以基底的名字加上连接符再加上该标签的名字（比如element ui的input组件，就以el为基底，-为连接符，input为该组件的名字，组成了.el-input的类选择器）,modify就是修饰的意思，当你需要给某个标签添加一点样式（比如颜色）的时候，它的类名就可以使用你之前组成的选择器（比如.el-input）的名称加上连接符加上名字，再组成一个类选择器，比如element ui的button组件，它的修饰以--为连接符，组成了一个修饰的选择器(.el-button--success)。除此之外，你还可以再定义子标签的类选择器，比如element ui的input组件，他对于子标签的选择器，采用了__为连接符，组成了.el-input__wrapper的类选择器。

????????接下来，就以element ui为模板，使用sass自定义一个bem架构。

????????首先需要定义基底(命名空间)和连接符

$namespace: 'ry' !default;   // 命名空间
$block-sel: '-' !default;    // 父元素类选择器的连接符
$elem-sel: '__' !default;    // 子元素类选择器的连接符
$mod-sel: '--' !default;     // 修饰的连接符

接下来就来定义连接规则，这里需要用到sass的混入语法（@mixin Sass: @mixin and @include）以及插值语法（#${variable_name} Sass: Interpolation）

// 定义连接规则
// block
@mixin b($block) {
    $B: #{$namespace + $block-sel + $block};
    .#{$B} {
        @content;
    }
}
@mixin el($el) {
    $selector: &;
    $E: #{$selector + $elem-sel + $el};
    @at-root {
        #{$E} {
            @content;
        }
    }
}
@mixin mod($mod) {
    $selector: &;
    $E: #{$selector + $mod-sel + $mod};
    @at-root {
        #{$E} {
            @content;
        }
    }
}

&：表示父级选择器

@at-root：表示不与父级选择器进行叠加(比如.el-input .el-input__wrapper使用了@at-root之后就成了.el-input__wrapper)

具体使用如下

<template>
    <div class="ry-box">
        <div>
            <Menu />
        </div>
        <div class="ry-box__right">
            <Header />
            <Content />
        </div>
    </div>
</template>
<style scoped lang="scss">
@include b(box) {
    @include bfc;
    display: flex;
    @include el(right) {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
}
</style>

如果想要在组件中不应用就能使用，需要在项目的配置文件写一些配置，如我用的是vue3，采用vite来构建项目，就需要在vite.config.js中添加一下配置，使用ts也一样。

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import './src/bem/css/bem.scss';` // 表示scss文件的位置
      }
    }
  }

以上内容来自于B站小满zs课程的学习总结，若有不对的地方请指正。