带你了解BEM架构并且实现它

lanpeople

已于 2024-03-10 17:45:34 修改

阅读量892

点赞数 16

文章标签：前端架构

于 2024-03-10 17:44:58 首次发布

本文链接：https://blog.csdn.net/lanpeople/article/details/136605556

版权

了解与编写BEM架构

1.了解BEM架构的知识

首先需要了解 BEM架构 是一个什么东西？

这个东西听起来很高大上，但是实际上你在使用 element 框架的时候就在不经意间使用到他。

首先来看一段百度的词典

BEM是一种前端命名方法论，主要是针对CSS，意思是块（Block）、元素（Element）、修饰符（Modifier）的简写。这种命名方法让CSS便于统一团队开发规范和方便维护。(https://baike.baidu.com/item/BEM/23772830)

再来结合一下 element 框架来理解一下

在这里展示的 el-button--primary 就是包含了上述的两个要素块（Block）、修饰符（Modifier）。

在这里展示的 el-input__wrapper 就是包含了上述的两个要素块（Block）、元素（Element）。

这样子看下来是否浅显易懂了呢？

了解了这个之后，我们来手写一下这个是如何实现的。

2.编写BEM架构

2.1环境搭建

2.1.1使用vite 快速构建一个项目（这个应该不必多说）

2.1.2创建一个bem.scss文件

2.1.3使用你喜欢的构建工具比如npm pnpm yarn等安装一个sass

npm install -g sass

2.2书写代码

2.2.1 定义一个命名空间

在这个 vow 中你可以任意设定你想要的值类似于 el 的这个前缀

!default 的意思在于假使你没有设定其他的值那就默认使用它

$namespace:'vow' !default

2.2.2 书写后面的步骤整体（懒得取名字了）

$namespace:'vow' !default; 
$block-sel:'-' !default;
$element-sel:'__' !default;
$modifier-sel:'--' !default;

@mixin b($block){
  $B:#{$namespace + $block-sel + $block};   
  .#{$B}{     
    @content;  
  }
}

@mixin e($el){
  $parentLevel:&;  
  @at-root{   
    #{$parentLevel + $element-sel + $el}{
      @content;
    }
  }
}

@mixin m($mod){
  $parentLevel:&;
  @at-root{
    #{$parentLevel + $modifier-sel + $mod}{
      @content;
    }
  }
}