BEM规范 - 技术栈

BEM 规范

BEM（Block、Element、Modifier）是一种 CSS 类名命名规范。该规范的核心思想是将页面分解成独立的块（Blocks）、元素（Elements）以及修饰器（Modifiers），以提高开发的效率和质量。这些概念有助于团队协作，简化代码管理和维护，并减少CSS特异性的问题，从而降低样式冲突的风险。

三个部分的具体含义为：

Block ：页面中的大区域，表示最顶级的划分，例如：轮播图(banner)、布局(layout)、文章(article)等等。
element ：区域中的组成部分，例如：轮播图中的横幅图片(banner__img)、轮播图中的容器（banner__container）、布局中的头部(layout__header)、文章中的标题(article_title)。
modifier ：可选。通常表示状态，例如：处于展开状态的布局左边栏（layout__left_expand）、处于选中状态的轮播图小圆点(banner__dot_selected)。

在某些大型工程中，如果使用BEM命名法，还可能会增加一个前缀，来表示类名的用途，常见的前缀有：

l: layout，表示这个样式是用于布局的
c: component，表示这个样式是一个组件，即一个功能区域
u: util，表示这个样式是一个通用的、工具性质的样式
j: javascript，表示这个样式没有实际意义，是专门提供给js获取元素使用的

结构：namespace-block__element--Modifier

BEM 规范结合 sass

bem.scss

scss 复制代码

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

@mixin b($b){
    .#{ $namespace + $block-sel + $b}{
        @content;
    }
};

@mixin e($e){
    $parent: &;
    @at-root{
        #{ & + $element-sel + $e}{
            @content;
        }
    }
};

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

vite.config.ts

ts 复制代码

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

App.vue

vue 复制代码

<template>
<div class="xz-test">
    xz
    <div class="xz-test__div">
        DZ
        <div class="xz-test__div--success">
            xxz
    	</div>
    </div>
</div>
</template>

<script setup lang='ts'>

</script>

<style scoped lang="scss">
    @include b(test) {
        color: red;
        @include e(div){
            color: blue;
            @include m(success){
                color: yellow;
            }
        }
    }
</style>