BEM：css命名规范

本文主要是介绍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>

效果：