跟小满老师学vue3 第十三章 BEM架构 + layout布局

BEM架构

BEM架构解决什么问题？

我们知道 CSS 只有一个作用域，无论你通过什么选择器去操作样式，一旦你声明一个选择器，它就是全局的，如果项目复杂，维护人必须小心意义，因为你一不小心可能就会影响到其他元素，代码的维护性很差，而且 CSS 代码的可读性也不行。

浏览器曾短暂通过 scope 字段支持 CSS 作用域，:scope 伪类就是曾经遗留的证据。

但是项目中我们总是希望编写可读性强且易于维护的 CSS 代码，我们应该寻找一种方法来解决它。

PS：上面这个讨论前置条件是传统网页开发，因为现在的 CSS 模块方案，通过将样式范围限定到组件模板作为标准，在很大程度上解决了这个问题。这意味着您无需担心一个组件中的类会影响另一个组件的样式——即使您使用相同的类名。

Block, element, modifier

由 Yandex 团队提出的一种 CSS 命名方法论 BEM。

首先 BEM 是一个分层系统，它把我们的网站分为三层，这三层正好对应着 BEM 三个英