BEM：css命名规范

BEM

BEM(Block-Element-Modifier)，块、元素、修饰符，是一种CSS命名规范，旨在前端开发中创建可重用组件和代码共享的方法，使样式易于扩展，易于维护，易于理解

规范：

1、块（Block）： 页面上独立的组件，具有明确的语义和功能。每个块都有自己的命名空间（如element的命名空间为 el，），单词之间以连字符（-）分隔。例如：element的input组件 el-input

2、元素（Element)： 组成块的不同元素，不能独立存在，依赖于块的上下文，元素名称以块名称为前缀，用双下划线分隔（__）。以element的select组件为例，左侧看成输入框 el-radio__input，右侧文字el-radio__label

3、修饰符（Modifier）： 修饰符用于改变元素的外观、状态或行为等。它们是可选的，修饰符名称以块/元素名称为前缀，用双连字符（–）分隔。以element的按钮为例

//快
block
name-block

//块 + 元素
block__element
name-block__element

//块 + 元素 + 修饰符
block--modifier
name-block--modifier
block__element--modifier
name-block__element--modifier

示例：使用Sass实现BEM

在vite项目中，使用Sass实现一个简单的BEM规范

新建bem.scss文件

$namespace: 'xx' !default;
$block-sel: '-' !default;
$element-sel: '__' !default;
$modifier-sel: '--' !default;

@mixin b($block) {
  $blockName: $namespace + $block-sel + $block;
  .#{$blockName} {    //插值语法  #{}
    @content;  //内容替换
  }
}

@mixin e($element) {
  $selector:&;
  @at-root {		//样式文件根层级上，而不是嵌套在其父选择器
      #{$selector + $element-sel + $element} {
          @content;
      }
  }
}

@mixin m($modifier) {
  $selector:&;
  @at-root {
      #{$selector + $modifier-sel + $modifier} {
          @content;
      }
  }
}

项目配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/bem.scss";`
      }
    }
  }
})

实现：

<template>  
  <div class="xx-main">
    <div class="xx-main__txt">
      Hello word
      <span class="xx-main__txt--red">状态</span>
    </div>
  </div>

</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
  @include b("main") {
    width: 200px;
    height: 200px;
    border: 1px solid #000;

    @include e("txt") {
      color: blue;

      @include m("red") {
        color: red;
      }
    }
  }
</style>

效果：