bem架构 element css的命名规则

什么是BEM架构

BEM（Block, Element, Modifier）是一种命名约定，用于在编写 CSS 和 HTML 类名时创建可维护和可重用的样式。BEM 是一种常用的 CSS 命名规范，它的目的是减少样式之间的耦合，增加样式的可读性，并提高样式的复用性。

BEM 的三个主要概念：

Block（块）：Block 是一个独立的、可复用的组件或模块，它代表一个完整的功能单元。块是一个顶层的元素，它本身应该有意义并且可以独立存在。
Element（元素）：Element 是块的组成部分，它不能单独存在，必须依赖于块。Element 是块的一部分，它只有在块的上下文中才有意义。
Modifier（修饰符）：Modifier 是用于改变块或元素外观、状态或行为的标志。通过添加修饰符类名，可以修改块或元素的样式，从而实现不同的变体。

BEM 的优点：

可读性：BEM 的类名规范清晰明了，易于理解和阅读，使其他开发者更容易理解代码结构和样式的用途。
可维护性：BEM 通过将样式与组件封装在一起，降低了样式之间的耦合性，使样式更易于维护和修改。
可重用性：BEM 鼓励将样式抽象为可复用的块和元素，提高了样式的复用性，减少了重复编写样式的工作。

BEM 的命名约定（以element-plus为例）：

el：namespace（element-plus所有样式都是el开头）
-：block（代表块级区域）
__：element（连接元素内容）
–：modifier（修饰内容）

使用sass 最小单元复刻一个bem 架构

$block-sel: "-" !default;
$element-sel: "__" !default;
$modifier-sel: "--" !default;
$namespace:'xm' !default;
@mixin bfc {height: 100%;overflow: hidden;
}//混入
@mixin b($block) {$B: $namespace + $block-sel + $block; //变量.#{$B}{ //插值语法#{}@content; //内容替换}
}@mixin flex {display: flex;
}@mixin e($element) {$selector:&;@at-root {#{$selector + $element-sel + $element} {@content;}}
}@mixin m($modifier) {$selector:&;@at-root {#{$selector + $modifier-sel + $modifier} {@content;}}

全局扩充sass

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';"}}}

Vue 组件用法

<template><div class="el-wraps"><div><Menu></Menu></div><div class="el-wraps__right"><Header></Header><Content></Content></div></div>
</template><script lang="ts" setup>
import { ref, reactive } from "vue"
import Menu from './Menu/index.vue'
import Content from './Content/index.vue'
import Header from './Header/index.vue'
</script><style lang="scss" scoped>
@include b('wraps'){@include bfc;@include flex;@include e(right){flex:1;display: flex;flex-direction: column;}
}
</style>