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>
相关推荐
伍哥的传说36 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783838 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为