bem架构 element css的命名规则

什么是BEM架构

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

BEM 的三个主要概念:

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

BEM 的优点:

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

BEM 的命名约定(以element-plus为例):

el:namespace(element-plus所有样式都是el开头)

-:block(代表块级区域)

__:element(连接元素内容)

--:modifier(修饰内容)

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

css 复制代码
$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

js 复制代码
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 组件用法

js 复制代码
<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>

内容来源网络总结
https://blog.csdn.net/XiugongHao/article/details/131962417
https://xiaoman.blog.csdn.net/article/details/122832888

相关推荐
Mintopia26 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia29 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo31 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊36 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆38 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼39 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
江城开朗的豌豆44 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..1 小时前
VUE工程化开发模式
前端·javascript·vue.js
_oP_i1 小时前
dify之Web 前端工作流编排(Workflow Builder)
前端·dify
Moment1 小时前
快手前端校招一面面经 🤔🤔🤔
前端·javascript·面试