前言

第一次看见BEM,万脸懵逼,以前从来没有见过,而且也没人提及过,感觉这块 🈶
点被前端开发佬们给忽视掉的样子,通过对官方文档的学习,原来我们一直都在接触着BEM,只不过用着舒服,但没有去里面具体深究而已!!

那么,什么是BEM?为什么要使用BEM?如何来使用BEM呢?

在开始介绍什么是BEM之前,先来看对比看一下未使用BEM以及使用了BEM之后的效果,比如
🈶 以下的一个效果需要用css来实现出来:

实现不同样式的按钮

👇 首先来看一下在此之前的一个常规写法:

我们可以看出这里的css其实是 🈶
不少重复的地方的,接下来进行一波优化改进:

🌟
进行了一波的优化之后,首先实现了同样的目标结果,然后将公共的部分进行了一个抽离,让每一次额外的css样式都以追加样式类的方式来加入,而且命名上也比较符合实际的运用场景!!
那么如果使用了本文所要普及的BEM之后,又会是怎样的一个结果呢?

🌠 进行了BEM化之后的样式,看起来好像 🆚
之前的增加了代码量,但这里遵循了一个规则,就是所有的button以及额外的样式都拥有了一个统一的规范,每一个叠加的样式类都仅仅维护着自身的一份属性而已

BEM遇上了sass/less,之后,编写css样式代码将提升至从未曾
🈶 过的愉悦感以及简洁:

🌠 上面可以看出,通过变量 + 嵌套 +
继承的方式来组合命名,实现样式的复用,代码上简洁干练,而且清晰易懂

BEM+sass+extend实现的效果


的针对sass文件的编译输出结果可以晓得,其实它的工作过程与第二种优化的输出结果是大相径庭的,但可以享受sass编码所带来的简洁,让css样式代码更加易懂

什么是BEM

要了解什么是BEM,先从其组成成本入手

BEM的组成

BEM = Block + Element + Modifier
首先来看关于BEM的组成结构图

BEM组成

  1. Block:
    在html节点中可被独立的功能元素块,一般可以是header、section、menu、navigation、main、footer等元素块,它一般不受页面中的其他样式的影响的独立元素块;
  2. Element: 一般 🈯 的是被包裹在
    Block中的孩子元素,虽然脱离了Block也可以单独运作,但一般是建议挂到Block容器视图之下;
  3. Modifier:
    Block以及Element的标志,用以控制Blocl/Element的外观以及行为

BEM在html中元素的体现

BEM在github中的使用

为什么要使用BEM

其实这里从
的针对不同的css命名以及使用的对比分析,可以清楚理解到css样式的编码设计上,原来也是需要像其他编程语言一样,需要进行架构上的设计与分模块的的开发,因为当项目越来越复杂的时候,需要进行长期
维护的情况下,如果其中的css的编码维护比较散乱的话,那么对于后续假如需要比较全局的维护:比如变换主题色,统一支持到响应式布局,系统统一置灰,或者改动到某个规则,全局使用到项目中,或者是整一个UI库,
这里的调整将会是毁灭性的,假如每次都是一个个地来修改的话,那么每次都需要调整的话,工作质量与效率都是极端低下的编码工作。

以组件一辆玩具车(Block)的场景来描述,我们将玩具车拆分为为不同的零件块(Element),每一辆机器人都可以行驶(Modifier),每一个零件都
🈯
不同的颜色、形状(Modifier),通过Modifier对不同的Block/Element来进行标记的话,就可以来生成出不同的玩具车

🌟 通过
玩具车的组装,将其拆分为不同零件的外观与动作的配置,让每次的外观配置(Modifier),仅针对到各自不同的零件、玩具车进行自定义配置,每个自定义的配置可以是完全独立,且互不影响的。
👉
通过提供统一的一套命名规范,来实现原本需要在统一的位置来维护css样式代码,改造为每个独立子模块进行维护、叠加!!

如何使用BEM

要学习如何使用BEM,需要先学习关于BEM每个元素的使用规则!

  1. Block主要是一个独立的html节点,虽然它们允许彼此嵌套,但是,还是一个独立的个体,不受其他模块影响,一般不允许使用标签来作为选择器的,这里以.main为例;
  2. Element作为Element的孩子元素,一般用两个下划线来拼接孩子元素,则有:.main__title;
  3. Modifier可以同时作用于Block+Element,且名称需要与其外观的名称要一致对应,这样子可以保证到所见即所得的效果,则有:.main--light.main--dark.main__title--mini.main__title--normal.main__title--large,采用不同的具有实际意义的名称来命名。

最后更新: 2022年07月09日 10:32

原始链接: https://www.91temaichang.com/2022/07/06/BEM-in-css/

× 请我吃糖~
打赏二维码