BEM架构

视频

总结：

1. BEM架构：一个命名类的规范而已，说白了就是如何给类起名字
2. 使用sass的目的：在<style>中模块化的使用类名，同时减少代码数量

1、 BEM架构

（通义灵码查询结果）
BEM (Block Element Modifier) 架构是一种广泛使用的 CSS 命名方法论，它帮助开发者组织和编写可维护的 CSS 代码。下面是 BEM 的几个关键概念：

1. Block (块)

表示页面上的独立组件或区域，具有自己的 HTML 结构、样式和行为。
Block 名称通常只包含小写字母和数字，并且用连字符 - 分隔多个单词。
示例: .header, .navigation-menu

2. Element (元素)

是 Block 内部的一部分，直接与 Block 关联。
Element 名称以 Block 名称作为前缀，并通过两个连字符 __ 与 Block 名称相连。
示例: .header__logo, .navigation-menu__item

3. Modifier (修饰符)

用于改变 Block 或 Element 的外观或行为。
Modifier 名称以 Block 或 Element 名称作为前缀，并通过一个连字符 – 与 Block 或 Element 名称相连。
示例: .header–fixed, .navigation-menu__item–active

4. 使用示例

假设有一个简单的导航菜单，我们可以这样使用 BEM:

<div class="navigation-menu"><ul class="navigation-menu__list"><li class="navigation-menu__item navigation-menu__item--active"><a href="#">Home</a></li><li class="navigation-menu__item"><a href="#">About</a></li><li class="navigation-menu__item"><a href="#">Contact</a></li></ul>
</div>

对应的 CSS 如下所示:

.navigation-menu {/* 基础样式 */
}.navigation-menu__list {/* 列表样式 */
}.navigation-menu__item {/* 列表项基础样式 */
}.navigation-menu__item--active {/* 当列表项处于激活状态时的样式 */
}

5. 优点

• 可维护性: BEM 提供了一种清晰的方式来组织 CSS 选择器，使得代码更容易理解和维护。
• 可复用性: Block 和 Element 的命名方式使得样式易于复用。
• 可扩展性: Modifier 允许在不更改 HTML 结构的情况下改变样式。

2 在 Vue 中的应用

在 Vue 项目中，你可以利用 BEM 方法来组织组件的样式。例如，在 Vue 单文件组件 (SFC) 中，你可以将样式写在 <style> 标签内，并使用 BEM 命名约定。

为什么使用sass？
通过sass语法可以简单的实现选择器的拼接

• 在src文件夹中创建sass文件

// $:定义变量
$namespace: "xm" !default; //default：如果namespcae没有赋值，则默认值为xm
$block-sel: "-" !default;
$element-sel: "__" !default;
$modifier-sel: "--" !default;// 作用：生成<div class="xm-block">里面的“xm-block”字符串
// @mixin:混入，类似于function(){}
@mixin b($b) {// $B:变量$B: #{$namespace + $block-sel + $b};// #{}:插值语法，用于选择器或者属性名// .#{$B}  ---->  .xm-block.#{$B} {@content // 内容块;;}
}// 作用：生成<div class="xm-block__el">里面的“xm-block__el”字符串
@mixin e($el) {$selector: &; // &: 父选择器，此处变量$selector的值等于父选择器名// @at-root：其中的内容从文档的根部，不使用正常的选择器嵌套/* 示例：如果不添加@at-root,则生成：.xm-block .xm-block__el{...}这里只需要：.xm-block__el{...} */@at-root {#{$selector + $element-sel + $el} {@content;}}
}// 作用：生成<div class="xm-block--m">里面的“xm-block--m”字符串
@mixin m($m) {$selector: &; @at-root {#{$selector + $modifier-sel + $m} {@content;}}}

3 scss文件引入为全局样式

• 在vite.config.js文件中添加以下配置

        // 配置css相关的的选项css:{// 指定预处理器的选项preprocessorOptions:{// sass预处理器的配置scss:{// 在所有的scss文件开头自动导入该文件additionalData: `@import "@/bem.scss";`}}}

4 在Vue组件中使用

<template><div class="xm-block"><div class="xm-block__element"><div class="xm-block--modifier"></div></div></div>
</template><script setup></script>
<style lang="scss">
@include b("block") {width: 200px;height: 200px;background-color: red;@include e("element") {width: 100px;height: 100px;background-color: blue;};@include m("modifier") {width: 50px;height: 50px;background-color: green;}}
</style>

• 结果
  

5 scss代码编译后的源码

6 组件中如何区分b、e、m

1. 在组件中最外层的是block
2. 组件中的元素就是element（元素包括子组件）
3. 类名的作用只是用于修饰，就是个modifier
4. 子组件，递归参考第一条