BEM架构 - 技术栈

视频

总结：

BEM架构：一个命名类的规范而已，说白了就是如何给类起名字
使用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:

html 复制代码

<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 如下所示:

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文件

javascript 复制代码

// $:定义变量
$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文件中添加以下配置

javascript 复制代码

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

4 在Vue组件中使用

javascript 复制代码

<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

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