BEM架构#

一、BEM 是什么#

BEM 是 Yandex 推出的一套 CSS 命名规范 & 前端组件化架构思想 全称：Block / Element / Modifier 用来解决：CSS 样式混乱、命名随意、层级嵌套过深、样式污染、多人协作冲突。

二、三大核心概念（官方定义）#

1. Block 块#

独立、可复用、不依赖其他模块的独立组件

作用：页面独立功能模块（头部、按钮、卡片、弹窗）
规则：
- 自身语义独立，不依赖父元素
- 命名：纯单词，短横线连接
- 示例：.header、.card、.btn

2. Element 元素#

属于某个 Block 内部、无法单独复用的子节点

作用：块的组成部分，脱离块就无意义
命名规则：块名__元素名（双下划线）
示例： .card__title、.card__desc、.btn__icon

3. Modifier 修饰符#

用来描述 块/元素的状态、样式变体

作用：区分不同形态、状态（禁用、高亮、尺寸、主题）
命名规则：块名/元素名--修饰符（双短横线）
示例： .btn--primary、.btn--disabled、.card--dark

三、标准命名格式#

1
/* Block 块 */
2
.block {}
3

4
/* Block 内 Element 元素 */
5
.block__element {}
6

7
/* 修饰符：块的变体 */
8
.block--modifier {}
9

10
/* 修饰符：元素的变体 */
11
.block__element--modifier {}

示例：

1
<div class="card card--dark">
2
  <h3 class="card__title">标题</h3>
3
  <p class="card__desc card__desc--gray">描述</p>
4
</div>

四、关键核心作用#

彻底解决 CSS 全局污染 所有样式都捆绑在独立块命名下，不会出现类名重复冲突。
扁平化 CSS，杜绝深层嵌套 告别 div ul li a 多层嵌套，选择器权重统一、更好维护。
语义化命名，可读性极强 看类名就知道：属于哪个模块、是什么角色、什么状态，协作一目了然。
组件高可复用、易扩展 新增样式只需要加修饰符，不改动原有基础样式，符合开闭原则。
统一团队编码规范 多人开发、大型项目统一书写规则，降低沟通、维护成本。

CSS预处理器的使用#

1. 基础概念#

CSS 预处理器：是一种拥有编程语法、拓展能力的专属样式语言，不属于原生 CSS，需要经过「编译」转换成浏览器可识别的原生 CSS 才能运行。

原生 CSS 是标记语言、无逻辑、无变量、无复用；预处理器给 CSS 增加了编程能力，让样式开发工程化。

2. 核心本质#

写：Less / Sass / Stylus 语法
编译：构建工具（Vite/Webpack）自动转原生CSS
运行：浏览器只识别最终编译后的 CSS

二、CSS 预处理器核心概念#

变量支持定义颜色、尺寸、间距、主题变量，统一管理、全局修改。
嵌套语法 支持层级嵌套，和 HTML 结构对应，减少重复书写选择器。
代码复用 混合、继承、引入、抽离公共样式，消除冗余代码。
逻辑运算 支持四则运算、条件判断、循环、函数，动态生成样式。
模块化拆分 支持文件拆分、按需导入，大型项目分模块管理样式。
作用域控制 配合架构规范（BEM），降低全局样式污染。

三、关键作用（解决原生 CSS 痛点）#

解决原生 CSS 无变量问题 原生无法统一维护主题色、圆角、字体；预处理器全局统一管控。
解决选择器冗余、层级混乱 嵌套写法，结构清晰，告别重复书写长选择器。
解决样式无法复用 原生重复写 flex 居中、清除浮动、圆角；预处理器通过混合一键复用。
解决大型项目难以维护 样式拆分文件、模块化开发，多人协作更规范。
增强动态能力 尺寸计算、循环生成布局、条件判断主题样式，原生 CSS 做不到。
兼容下沉 编译阶段自动处理部分兼容写法，减少手写兼容代码。

四、主流 CSS 预处理器分类 & 语法区别#

1. Less#

诞生：2009年，阿里主推、国内老旧项目存量极大
语法：完全兼容原生 CSS，上手最简单
核心标识：@变量、@mixin
特点：弱编程、轻量、学习成本低

1
@primary: #1677ff;
2
.box { color: @primary; }

2. Sass / SCSS#

诞生：2006年，国外主流、现代项目首选
两种格式：
- sass：缩进式语法（无大括号、无分号）
- scss：完全兼容 CSS，企业通用标准
核心标识：$变量、@include、功能最强
特点：完整编程能力（循环/条件/函数）、生态最强

1
$primary: #1677ff;
2
.box { color: $primary; }

3. Stylus#

诞生：前端早期流行，移动端旧项目多见
语法极简：可省略大括号、分号、冒号
现状：基本淘汰，新项目不再使用

总结：

老旧项目/阿里系：Less

新项目/跨框架/大厂通用：SCSS(Sass)

Stylus 已过时，不用学

五、配套三方库 / 框架 / 工程化支持#

1. 构建工具原生支持#

Vite：内置支持 Less / SCSS，零配置直接用
Webpack：需安装 loader 编译
- Less：less + less-loader
- Sass：sass + sass-loader
Vue / React / Next / Nuxt：全部原生适配预处理器

2. 成熟 UI 框架底层依赖#

Ant Design：底层基于 Less 开发
Element Plus / Element UI：底层基于 SCSS
Vant / TDesign：SCSS 开发，支持主题定制
Tailwind CSS：可结合 SCSS 变量自定义主题

3. 全局主题定制库#

基于预处理器变量，实现一键换肤、主题切换
例如：组件库通过修改 scss/less 变量 定制主题色、圆角、间距

4. 工具类预设库#

sass-resources-loader：全局注入通用变量、混合，无需每个文件单独导入

六、补充：现代方案对比#

现在除了传统预处理器，还有两类替代方案：

CSS Variables（原生变量） 浏览器原生支持，运行时动态切换，无编译成本，但无嵌套/混合能力
CSS-in-JS（Styled-Components） JS 写样式，React 生态常用，脱离 CSS 文件体系
原子化 CSS（Tailwind） 弱化预处理器，靠工具类写样式

企业现状：中大型项目依旧SCSS / Less 为主流，是前端必备技能。

Sass的基本使用#

一、Sass 是什么？#

Sass = CSS 的超集 → 让 CSS 拥有变量、嵌套、混合、函数、模块化等编程能力。最终会编译成普通 CSS运行在浏览器。

二、核心概念（4 个必懂）#

1. 变量（Variables）#

把常用值存起来，统一修改。

2. 嵌套（Nesting）#

像 HTML 结构一样写 CSS，不用重复写父选择器。

3. 混合（Mixins）#

可复用的 CSS 代码片段，像函数一样调用。

4. 模块化（Partials / Import）#

把 CSS 拆成多个文件，统一引入，方便维护。

三、关键作用（为什么要用 Sass）#

告别重复代码 → 变量 + 混合极大减少冗余
结构更清晰 → 嵌套写法和 HTML 结构对应
便于团队维护 → 统一主题、统一规范
支持逻辑运算 → 计算、判断、循环
文件拆分管理 → 大型项目必备

四、最常用基本语法（直接复制就能用）#

1. 变量 `$`#

1
// 定义
2
$primary-color: #1677ff;
3
$font-size: 14px;
4

5
// 使用
6
.btn {
7
  color: $primary-color;
8
  font-size: $font-size;
9
}

2. 嵌套（最常用！）#

1
// Sass 嵌套
2
.card {
3
  background: #fff;
4

5
  // 子元素
6
  .title {
7
    font-size: 18px;
8
  }
9

10
  // 伪类 & 代表父级
11
  &:hover {
12
    transform: scale(1.02);
13
  }
14
}

编译后 CSS

1
.card { background: #fff; }
2
.card .title { font-size: 18px; }
3
.card:hover { transform: scale(1.02); }

4. 继承 `@extend`（抽公共样式）#

1
.btn {
2
  padding: 8px 16px;
3
  border-radius: 4px;
4
}
5

6
.btn-primary {
7
  @extend .btn;
8
  background: blue;
9
}

5. 导入 `@import`（模块化）#

1
// 把多个 Sass 文件合成一个
2
@import './variables';
3
@import './mixins';
4
@import './components/button';

6. 运算（直接算尺寸/颜色）#

1
.box {
2
  width: 50% - 20px;
3
  margin: 10px * 2;
4
}

构建BEM架构需要掌握的核心概念#

一、插值语句 `#{}` (Interpolation)#

官方核心概念#

插值语句 #{} 是 Sass 最强大的语法之一，作用： 把 Sass 变量、表达式、计算结果，插入到 CSS 的“字符串/选择器/属性名”里。

原生 Sass 变量只能用在属性值里；想在选择器、属性名、注释、字符串里用变量，必须用 #{}。

关键作用#

在选择器中使用变量
在属性名中使用变量
在字符串/路径中嵌入变量
拼接动态类名（配合 BEM 神器）

基本语法#

1
// 1. 变量定义
2
$name: card;
3
$attr: color;
4
$val: #ff0000;
5

6
// 2. 插值用在 选择器
7
.#{$name} {
8
  // 3. 插值用在 属性名
9
  #{$attr}: $val;
10

11
  // 4. 插值用在 字符串
12
  background: url("./images/#{$name}.png");
13
}

编译后

1
.card {
2
  color: #ff0000;
3
  background: url("./images/card.png");
4
}

最常用场景（BEM 必用）#

1
$block: btn;
2

3
.#{$block} {
4
  &__text { }     // btn__text
5
  &--primary { }  // btn--primary
6
}

二、@at-root#

官方核心概念#

@at-root 是 Sass 的跳出嵌套指令。作用：让嵌套的样式，强制跳出父级选择器，直接输出到根层级。

关键作用#

跳出深层嵌套，避免选择器层级过深
在嵌套内写全局样式
配合媒体查询、动画、关键帧使用
保持代码结构清晰，又不生成冗余选择器

基本语法#

1
.card {
2
  background: #fff;
3

4
  // 正常嵌套
5
  .title {
6
    font-size: 20px;
7
  }
8

9
  // 强制跳出到根层级
10
  @at-root .desc {
11
    color: #333;
12
  }
13
}

编译后

1
.card { background: #fff; }
2
.card .title { font-size: 20px; }
3
.desc { color: #333; } /* 直接在根层级 */

高级常用（写动画/媒体查询）#

1
.box {
2
  @at-root {
3
    @keyframes move { }
4
    @media (max-width:768px) { }
5
  }
6
}

三、Sass 参数（Mixins / Functions）#

官方核心概念#

Sass 的 @mixin 和 @function 都支持参数，让代码片段变成可配置、可复用的动态样式工具。

参数分为 3 种：

普通参数
默认参数
不定长参数（可变参数）…

关键作用#

让混合宏、函数动态可配置
大幅减少重复代码
实现通用工具样式（居中、尺寸、主题、圆角）

基本语法#

1. 普通参数#

1
@mixin size($w, $h) {
2
  width: $w;
3
  height: $h;
4
}
5

6
.box {
7
  @include size(100px, 100px);
8
}

2. 默认参数（最常用）#

1
@mixin flex($dir: row, $justify: center) {
2
  display: flex;
3
  flex-direction: $dir;
4
  justify-content: $justify;
5
}
6

7
.box {
8
  @include flex; // 使用默认值
9
  @include flex(column); // 传第一个
10
}

3. 可变参数 …#

1
@mixin shadow($shadows...) {
2
  box-shadow: $shadows;
3
}
4

5
.box {
6
  @include shadow(0 0 5px red, 0 0 10px blue);
7
}

使用Sass构建BEM架构系统(Element Plus )#

一、Element Plus 官方 BEM 规则（必须背会）#

1. 命名格式（Element 官方标准）#

1
[命名空间]-[块名]__[元素名]--[修饰符]

命名空间：el（你项目可以自定义，如 yz、app）
Block：el-button、el-card
Element：el-button__icon
Modifier：el-button--primary

2. 核心符号#

双下划线 __：元素
双短横线 --：修饰符/状态

二、Element Plus 官方封装的 BEM Sass 工具函数#

这是 Element 真实源码里用的核心 Sass 工具

1. 全局 BEM 配置 `bem.scss`#

1
// 命名空间（Element 用 el，你可以改成自己项目的）
2
$namespace: 'app';
3

4
// Block 前缀：app-
5
$block-sel: '-' !default;
6

7
// Element 前缀：__
8
$element-sel: '__' !default;
9

10
// Modifier 前缀：--
11
$modifier-sel: '--' !default;
12

13
// 生成 Block：.app-block
14
@mixin b($block) {
15
  .#{$namespace}#{$block-sel}#{$block} {
16
    @content;
17
  }
18
}
19

20
// 生成 Element：.app-block__element
21
@mixin e($element) {
22
  &[#{$element-sel}]#{$element} {
23
    @content;
24
  }
25
}
26

27
// 生成 Modifier：.app-block--modifier
28
@mixin m($modifier) {
29
  &[#{$modifier-sel}]#{$modifier} {
30
    @content;
31
  }
32
}

三、实际组件中如何写？（真实业务代码）#

1
// 引入 BEM 工具
2
@import '@/styles/bem.scss';
3

4
// 编写 Button 组件
5
@include b(button) {
6
  padding: 8px 16px;
7
  border-radius: 4px;
8
  cursor: pointer;
9

10
  // 元素：图标
11
  @include e(icon) {
12
    margin-right: 6px;
13
  }
14

15
  // 修饰符：主要按钮
16
  @include m(primary) {
17
    background: #409eff;
18
    color: #fff;
19
  }
20

21
  // 修饰符：成功按钮
22
  @include m(success) {
23
    background: #67c23a;
24
    color: #fff;
25
  }
26
}

编译后 CSS（标准 BEM 结构）#

1
.app-button {
2
  padding: 8px 16px;
3
  border-radius: 4px;
4
  cursor: pointer;
5
}
6
.app-button__icon {
7
  margin-right: 6px;
8
}
9
.app-button--primary {
10
  background: #409eff;
11
  color: #fff;
12
}
13
.app-button--success {
14
  background: #67c23a;
15
  color: #fff;
16
}

四、全局 Sass 文件目录结构（Element Plus 标准结构）#

项目结构：

1
src/
2
└── styles/
3
    ├── index.scss       # 主入口
4
    ├── bem.scss         # BEM 工具（Element 同款）
5
    ├── variables.scss   # 全局变量：颜色、尺寸、字体
6
    ├── mixins.scss      # 全局混合：居中、ellipsis 等
7
    └── reset.scss       # 样式重置

1. variables.scss（全局主题变量）#

1
// 颜色（完全参考 Element Plus）
2
$color-primary: #409eff;
3
$color-success: #67c23a;
4
$color-warning: #e6a23c;
5
$color-danger: #f56c6c;
6

7
// 尺寸
8
$font-size-base: 14px;
9
$border-radius-base: 4px;

2. mixins.scss#

1
// 文字溢出省略
2
@mixin ellipsis {
3
  overflow: hidden;
4
  text-overflow: ellipsis;
5
  white-space: nowrap;
6
}
7

8
// flex 居中
9
@mixin flex-center {
10
  display: flex;
11
  justify-content: center;
12
  align-items: center;
13
}

3. index.scss（统一导出）#

1
@import './variables.scss';
2
@import './bem.scss';
3
@import './mixins.scss';
4
@import './reset.scss';

五、在 Vue3 + Vite 中全局注入 Sass（不用每个组件都 import）#

vite.config.js 配置#

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3

4
export default defineConfig({
5
  plugins: [vue()],
6
  css: {
7
    preprocessorOptions: {
8
      scss: {
9
        // 自动注入全局样式文件
10
        additionalData: `@import "@/styles/index.scss";`
11
      }
12
    }
13
  }
14
})

配置后，所有 Vue 组件、Sass 文件里，可直接使用：

全局变量 $color-primary
BEM 混合 @include b(button)
工具混合 @include flex-center

六、在 Vue 组件中使用（示例）#

1
<template>
2
  <button class="app-button app-button--primary">
3
    <i class="app-button__icon"></i>
4
    确认按钮
5
  </button>
6
</template>
7

8
<style lang="scss" scoped>
9
// 无需再 import 任何文件！
10
@include b(button) {
11
  background: #fff;
12

13
  @include e(icon) {
14
    color: $color-primary;
15
  }
16

17
  @include m(primary) {
18
    background: $color-primary;
19
  }
20
}
21
</style>

可以这么说: Element Plus = Sass 全局变量 + Sass 混合函数 + BEM 命名规范#

基于 Element UI 风格 + Sass + BEM 的 Layout 布局实战#

首先,我们要重置浏览器的默认样式--->

企业级CSS样式重置文件(reset.css), 开箱即用:#

1
/* =============================================
2
  专业级 CSS 重置样式表 - 适用于所有商业项目
3
  融合：Normalize.css + 业务通用重置
4
============================================= */
5

6
/* 1. 全局盒模型统一（最重要） */
7
*,
8
*::before,
9
*::after {
10
  margin: 0;
11
  padding: 0;
12
  box-sizing: border-box;
13
}
14

15
/* 2. 根元素基础设置 */
16
html {
17
  /* 统一字体渲染 */
18
  -webkit-font-smoothing: antialiased;
19
  -moz-osx-font-smoothing: grayscale;
20
  /* 根字体大小（方便 rem 计算） */
21
  font-size: 16px;
22
}
23

24
/* 3. body 基础样式 */
25
body {
26
  /* 行业标准无衬线字体栈 */
27
  font-family:
28
    -apple-system, BlinkMacSystemFont,
29
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
30
    "Noto Sans", sans-serif;
31
  /* 行高统一 */
32
  line-height: 1.5;
33
  /* 默认文字颜色（柔和黑） */
34
  color: #333;
35
  /* 背景色 */
36
  background-color: #fff;
37
}
38

39
/* 4. 列表重置 */
40
ul, ol {
41
  list-style: none;
42
}
43

44
/* 5. 链接重置 */
45
a {
46
  text-decoration: none;
47
  color: inherit;
48
}
49

50
a:hover {
51
  text-decoration: none;
52
}
53

54
/* 6. 表单元素重置 */
55
button,
56
input,
57
optgroup,
58
select,
59
textarea {
60
  border: none;
61
  outline: none;
62
  font-family: inherit;
63
  font-size: inherit;
64
  background: none;
65
  appearance: none;
66
}
67

68
/* 按钮点击样式重置 */
69
button {
70
  cursor: pointer;
71
}
72

73
button:disabled {
74
  cursor: not-allowed;
75
}
76

77
/* 7. 图片、媒体重置 */
78
img,
79
video,
80
canvas,
81
svg {
82
  max-width: 100%;
83
  vertical-align: middle;
84
  display: inline-block;
85
}
86

87
/* 8. 表格重置 */
88
table {
89
  border-collapse: collapse;
90
  border-spacing: 0;
91
}
92

93
/* 9. 标题重置 */
94
h1, h2, h3, h4, h5, h6 {
95
  font-weight: normal;
96
  font-size: inherit;
97
}
98

99
/* 10. 引用、斜体重置 */
100
blockquote, q {
101
  quotes: none;
102
}
103

104
blockquote:before,
105
blockquote:after,
106
q:before,
107
q:after {
108
  content: '';
109
  content: none;
110
}
111

112
/* 11. 清除浮动（通用工具类） */
113
.clearfix::after {
114
  content: "";
115
  display: table;
116
  clear: both;
117
}
118

119
/* 12. 强制文字不换行 */
120
.text-nowrap {
121
  white-space: nowrap;
122
  overflow: hidden;
123
  text-overflow: ellipsis;
124
}

文件价值:#

统一所有浏览器默认样式 消除 Chrome / Firefox / Safari / Edge 的差异。
box-sizing: border-box 让宽高计算永远符合预期，专业开发必备。
表单、按钮、链接、图片全部重置 不会出现默认边框、默认边距、默认下划线。
字体栈是行业标准 适配 Windows / Mac / 移动端，显示最清晰。
自带工具类 clearfix、text-nowrap 直接可用。

如何使用#

HTML引入:

1
  <link rel="stylesheet" href="./reset.css">
2
  <link rel="stylesheet" href="./你的业务样式.css">

Vue / React / 工程化项目：

1
import './reset.css'

实战编写#

一、项目结构（遵循 Element 标准）#

1
src/
2
├── styles/
3
│   ├── index.scss       # 全局样式入口
4
│   ├── variables.scss   # 全局变量
5
│   ├── bem.scss         # BEM 工具函数
6
│   └── mixins.scss      # 公共混合
7
└── components/
8
    └── Layout/
9
        ├── index.vue    # 布局组件
10
        └── index.scss   # 组件样式

二、全局 Sass 配置（核心 BEM 工具）#

1. `styles/variables.scss`（全局主题变量）#

1
// 颜色系统（Element UI 标准）
2
$color-primary: #409eff;
3
$color-bg-dark: #1f1f1f;
4
$color-bg-light: #282828;
5
$color-text-primary: #ffffff;
6
$color-text-secondary: #a8a8a8;
7
$color-border: #424242;
8

9
// 尺寸系统
10
$sidebar-width: 260px;
11
$header-height: 64px;
12
$border-radius-base: 4px;
13
$font-size-base: 14px;
14

15
// 过渡动画
16
$transition-base: all 0.3s ease;

2. `styles/bem.scss`（Element 同款 BEM 工具）#

1
$namespace: 'app' !default;
2
$block-sel: '-' !default;
3
$element-sel: '__' !default;
4
$modifier-sel: '--' !default;
5

6
// 生成 Block: .app-block
7
@mixin b($block) {
8
  $B: #{$namespace}#{$block-sel}#{$block};
9
  .#{$B} {
10
    @content;
11
  }
12
}
13

14
// 生成 Element: .app-block__element
15
@mixin e($element) {
16
  $selector: &;
17
  @at-root {
18
    #{$selector}#{$element-sel}#{$element} {
19
      @content;
20
    }
21
  }
22
}
23

24
// 生成 Modifier: .app-block--modifier
25
@mixin m($modifier) {
26
  $selector: &;
27
  @at-root {
28
    #{$selector}#{$modifier-sel}#{$modifier} {
29
      @content;
30
    }
31
  }
32
}

3. `styles/mixins.scss`（公共工具混合）#

1
// Flex 居中
2
@mixin flex-center {
3
  display: flex;
4
  justify-content: center;
5
  align-items: center;
6
}
7

8
// 文字溢出省略
9
@mixin ellipsis {
10
  overflow: hidden;
11
  text-overflow: ellipsis;
12
  white-space: nowrap;
13
}
14

15
// 清除默认样式
16
@mixin reset-base {
17
  margin: 0;
18
  padding: 0;
19
  box-sizing: border-box;
20
}

4. `styles/index.scss`（全局入口）#

1
@import './variables.scss';
2
@import './bem.scss';
3
@import './mixins.scss';
4

5
// 全局重置
6
*, *::before, *::after {
7
  @include reset-base;
8
}
9

10
html, body {
11
  height: 100%;
12
  font-size: $font-size-base;
13
  color: $color-text-primary;
14
  background-color: $color-bg-dark;
15
}

三、Vite 全局注入配置（无需手动 import）#

在 vite.config.js 中配置自动注入全局 Sass：

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3
import { fileURLToPath, URL } from 'node:url'
4

5
export default defineConfig({
6
  plugins: [vue()],
7
  resolve: {
8
    alias: {
9
      '@': fileURLToPath(new URL('./src', import.meta.url))
10
    }
11
  },
12
  css: {
13
    preprocessorOptions: {
14
      scss: {
15
        additionalData: `@import "@/styles/index.scss";`
16
      }
17
    }
18
  }
19
})

四、Layout 组件完整代码#

1. `components/Layout/index.vue`（组件结构）#

1
<template>
2
  <div class="app-layout">
3
    <!-- 侧边栏 -->
4
    <aside class="app-layout__sidebar">
5
      <nav class="app-sidebar">
6
        <!-- Navigator One -->
7
        <div class="app-sidebar__group">
8
          <div class="app-sidebar__item app-sidebar__item--parent">
9
            <span class="app-sidebar__icon">✉️</span>
10
            <span class="app-sidebar__text">Navigator One</span>
11
            <span class="app-sidebar__arrow">⌃</span>
12
          </div>
13
          <div class="app-sidebar__children">
14
            <div class="app-sidebar__group-title">Group 1</div>
15
            <div class="app-sidebar__item">Option 1</div>
16
            <div class="app-sidebar__item">Option 2</div>
17
            <div class="app-sidebar__group-title">Group 2</div>
18
            <div class="app-sidebar__item">Option 3</div>
19
            <div class="app-sidebar__item app-sidebar__item--parent">
20
              <span class="app-sidebar__text">Option4</span>
21
              <span class="app-sidebar__arrow">⌄</span>
22
            </div>
23
          </div>
24
        </div>
25

26
        <!-- Navigator Two -->
27
        <div class="app-sidebar__group">
28
          <div class="app-sidebar__item app-sidebar__item--parent">
29
            <span class="app-sidebar__icon">🧩</span>
30
            <span class="app-sidebar__text">Navigator Two</span>
31
            <span class="app-sidebar__arrow">⌄</span>
32
          </div>
33
        </div>
34

35
        <!-- Navigator Three -->
36
        <div class="app-sidebar__group">
37
          <div class="app-sidebar__item app-sidebar__item--parent">
38
            <span class="app-sidebar__icon">⚙️</span>
39
            <span class="app-sidebar__text">Navigator Three</span>
40
            <span class="app-sidebar__arrow">⌃</span>
41
          </div>
42
          <div class="app-sidebar__children">
43
            <div class="app-sidebar__group-title">Group 1</div>
44
            <div class="app-sidebar__item">Option 1</div>
45
          </div>
46
        </div>
47
      </nav>
48
    </aside>
49

50
    <!-- 主内容区 -->
51
    <div class="app-layout__main">
52
      <!-- 头部 -->
53
      <header class="app-layout__header">
54
        <div class="app-header__user">
55
          <span class="app-header__icon">⚙️</span>
56
          <span class="app-header__name">Tom</span>
57
        </div>
58
      </header>
59

60
      <!-- 内容区 -->
61
      <main class="app-layout__content">
62
        <table class="app-table">
63
          <thead class="app-table__head">
64
            <tr>
65
              <th>Date</th>
66
              <th>Name</th>
67
              <th>Address</th>
68
            </tr>
69
          </thead>
70
          <tbody class="app-table__body">
71
            <tr v-for="i in 8" :key="i">
72
              <td>2016-05-02</td>
73
              <td>Tom</td>
74
              <td>No. 189, Grove St, Los Angeles</td>
75
            </tr>
76
          </tbody>
77
        </table>
78
      </main>
79
    </div>
80
  </div>
81
</template>
82

83
<script setup lang="ts">
84
// 组件逻辑（可扩展菜单展开/收起）
85
</script>
86

87
<style lang="scss" scoped>
88
@include b(layout) {
89
  display: flex;
90
  height: 100vh;
91
  overflow: hidden;
92

93
  @include e(sidebar) {
94
    width: $sidebar-width;
95
    background-color: $color-bg-dark;
96
    border-right: 1px solid $color-border;
97
    flex-shrink: 0;
98
  }
99

100
  @include e(main) {
101
    flex: 1;
102
    display: flex;
103
    flex-direction: column;
104
    background-color: $color-bg-dark;
105
  }
106

107
  @include e(header) {
108
    height: $header-height;
109
    background-color: #2c4260;
110
    display: flex;
111
    justify-content: flex-end;
112
    align-items: center;
113
    padding: 0 20px;
114
    border-bottom: 1px solid $color-border;
115
  }
116

117
  @include e(content) {
118
    flex: 1;
119
    padding: 20px;
120
    overflow-y: auto;
121
  }
122
}
123

124
// 侧边栏样式
125
@include b(sidebar) {
126
  height: 100%;
127
  padding: 20px 0;
128

129
  @include e(group) {
130
    margin-bottom: 16px;
131
  }
132

133
  @include e(item) {
134
    padding: 12px 24px;
135
    cursor: pointer;
136
    transition: $transition-base;
137
    font-size: 18px;
138
    display: flex;
139
    align-items: center;
140
    gap: 12px;
141

142
    &:hover {
143
      background-color: $color-bg-light;
144
    }
145

146
    @include m(parent) {
147
      font-weight: 500;
148
    }
149
  }
150

151
  @include e(icon) {
152
    font-size: 20px;
153
    width: 24px;
154
    text-align: center;
155
  }
156

157
  @include e(text) {
158
    flex: 1;
159
  }
160

161
  @include e(arrow) {
162
    font-size: 16px;
163
    color: $color-text-secondary;
164
  }
165

166
  @include e(children) {
167
    padding-left: 24px;
168
  }
169

170
  @include e(group-title) {
171
    padding: 8px 24px;
172
    color: $color-text-secondary;
173
    font-size: 14px;
174
  }
175
}
176

177
// 头部样式
178
@include b(header) {
179
  @include e(user) {
180
    display: flex;
181
    align-items: center;
182
    gap: 8px;
183
    font-size: 18px;
184
  }
185

186
  @include e(icon) {
187
    font-size: 20px;
188
  }
189
}
190

191
// 表格样式
192
@include b(table) {
193
  width: 100%;
194
  border-collapse: collapse;
195

196
  @include e(head) {
197
    th {
198
      text-align: left;
199
      padding: 12px 16px;
200
      border-bottom: 1px solid $color-border;
201
      color: $color-text-secondary;
202
      font-size: 16px;
203
    }
204
  }
205

206
  @include e(body) {
207
    td {
208
      padding: 16px;
209
      border-bottom: 1px solid $color-border;
210
      font-size: 16px;
211
    }
212

213
    tr:hover {
214
      background-color: $color-bg-light;
215
    }
216
  }
217
}
218
</style>

往页之所以珍贵

BEM架构#

一、BEM 是什么#

二、三大核心概念（官方定义）#

1. Block 块#

2. Element 元素#

3. Modifier 修饰符#

三、标准命名格式#

四、关键核心作用#

CSS预处理器的使用#

1. 基础概念#

2. 核心本质#

二、CSS 预处理器 核心概念#

三、关键作用（解决原生 CSS 痛点）#

四、主流 CSS 预处理器 分类 & 语法区别#

1. Less#

2. Sass / SCSS#

3. Stylus#

五、配套三方库 / 框架 / 工程化支持#

1. 构建工具原生支持#

2. 成熟 UI 框架底层依赖#

3. 全局主题定制库#

4. 工具类预设库#

六、补充：现代方案对比#

Sass的基本使用#

一、Sass 是什么？#

二、核心概念（4 个必懂）#

1. 变量（Variables）#

2. 嵌套（Nesting）#

3. 混合（Mixins）#

4. 模块化（Partials / Import）#

三、关键作用（为什么要用 Sass）#

四、最常用基本语法（直接复制就能用）#

1. 变量 $#

2. 嵌套（最常用！）#

4. 继承 @extend（抽公共样式）#

5. 导入 @import（模块化）#

6. 运算（直接算尺寸/颜色）#

构建BEM架构需要掌握的核心概念#

一、插值语句 #{} (Interpolation)#

官方核心概念#

关键作用#

基本语法#

最常用场景（BEM 必用）#

二、@at-root#

官方核心概念#

关键作用#

基本语法#

高级常用（写动画/媒体查询）#

三、Sass 参数（Mixins / Functions）#

官方核心概念#

关键作用#

基本语法#

1. 普通参数#

2. 默认参数（最常用）#

3. 可变参数 …#

使用Sass构建BEM架构系统(Element Plus )#

一、Element Plus 官方 BEM 规则（必须背会）#

1. 命名格式（Element 官方标准）#

2. 核心符号#

二、Element Plus 官方封装的 BEM Sass 工具函数#

1. 全局 BEM 配置 bem.scss#

三、实际组件中如何写？（真实业务代码）#

编译后 CSS（标准 BEM 结构）#

四、全局 Sass 文件目录结构（Element Plus 标准结构）#

1. variables.scss（全局主题变量）#

2. mixins.scss#

3. index.scss（统一导出）#

五、在 Vue3 + Vite 中 全局注入 Sass（不用每个组件都 import）#

vite.config.js 配置#

六、在 Vue 组件中使用（示例）#

可以这么说: Element Plus = Sass 全局变量 + Sass 混合函数 + BEM 命名规范#

基于 Element UI 风格 + Sass + BEM 的 Layout 布局实战#

企业级CSS样式重置文件(reset.css), 开箱即用:#

文件价值:#

如何使用#

实战编写#

一、项目结构（遵循 Element 标准）#

二、全局 Sass 配置（核心 BEM 工具）#

1. styles/variables.scss（全局主题变量）#

二、CSS 预处理器核心概念#

四、主流 CSS 预处理器分类 & 语法区别#

1. 变量 `$`#

4. 继承 `@extend`（抽公共样式）#

5. 导入 `@import`（模块化）#

一、插值语句 `#{}` (Interpolation)#

1. 全局 BEM 配置 `bem.scss`#

五、在 Vue3 + Vite 中全局注入 Sass（不用每个组件都 import）#

1. `styles/variables.scss`（全局主题变量）#

2. `styles/bem.scss`（Element 同款 BEM 工具）#

3. `styles/mixins.scss`（公共工具混合）#

4. `styles/index.scss`（全局入口）#

1. `components/Layout/index.vue`（组件结构）#