使用 BEM 方法编写更简洁的 CSS
你是否曾经遇到过这种语法，并想当然地认为它是自动生成的，而没有过多思考？很有可能你遇到过。
what__is--this
本文将探讨 BEM 的相关内容、优势以及是否应该在下一个项目中使用它。
什么是BEM？
块元素修饰符方法论（简称 BEM）是一种流行的 HTML 和 CSS 类命名约定，有助于保持代码的组织性和可维护性。
什么是“可维护代码”？
可维护代码是指易于修改或扩展的代码，这意味着在不影响其他方面的情况下进行更改所需的时间更少。
BEM是如何工作的？
BEM类名由3个实体组成：
- 块：一个独立实体，它本身就具有意义
Navbar，button例如，，，，，。imagefootersectioncontainer - 元素：代码块的一部分，它本身没有独立的含义，但在语义上与所属代码块紧密相关。例如
title：item，，，list。checkbox - 修饰符：用于改变块或元素的外观、行为或状态。例如
background，，，，focus。hoverchecked
当这三者组合成一个类名时，其写法为：
[block]__[element]--[modifier]
让我们看一下下面的插图，以便更好地了解 BEM 的工作原理。
从图中可以看出，
- 这
card是Block，也可以将其视为父容器。 card__image，，都是元素，它们card__description在语义上与块相关联。它们也可以被视为子项，并在块名称后用两个下划线表示。card__buttoncard- 这
card__button--hovered是一个修饰符，用于操作元素，card__button以便我们可以在不影响任何完全无关模块的情况下设置其样式。具体做法是在元素名称后添加两个连字符。
为什么要使用BEM？
- BEM 方法论使你的 CSS 代码拥有稳固的结构，同时保持简洁易懂。
- 它传达了你的选择器的用途
- BEM 帮助你系统地思考 CSS 组织结构。这让你能够高效地独立工作和团队协作。
- BEM 具有独特的 CSS 类名创建风格，不会与其他类名发生冲突。
何时使用边界元法
BEM 主要用于具有多个页面、HTML 选择器和大型代码结构的项目中，这类项目往往难以维护代码，甚至可能导致特异性和继承问题。
如果组件本身就可以进行作用域控制，例如使用 styled-components 或 CSS modules，则不需要使用 BEM。
个人资料卡示例
这是我制作的一张简介卡，用来展示BEM的应用方式。这是卡片的最终预览图。
在我们继续之前，我想请你试着找出这张卡片上的哪些组件是方块、元素或修饰符。
太棒了！你答对了。
现在，让我们来看代码。
看到 HTML 文件中堆积如山的类，你可能会觉得对于一个简单的卡片来说，这类太多了，你的想法是对的。
回想一下我们之前学过的，由于“BEM 具有独特的 CSS 类名生成规范”，因此不会与其他类名冲突。事实上，项目中的 CSS 越多，代码堆积就越多，面临的具体性和复杂性问题也就越多。
另外，请注意，修饰符不应单独存在。修饰符应始终与元素类放在一起，如HTML第 80 行card__button所示，位于 . 之前card__button--hovered。
查看编译后的 CSS
我在这里使用 SASS，因为它让我可以轻松地嵌套类，而无需.card每次都输入。但如果您不了解 SASS 也不用担心；您可以按照下方屏幕截图中的箭头查看编译后的 CSS。
1. 点击下拉菜单
2. 点击“查看编译后的 CSS”
请查看我在 freeCodeCamp 上发表的文章，它可以帮助您入门 SASS。
概括
BEM 等方法论的目标是提供一套指导原则，帮助理解和维护 CSS，因此即使你不严格遵循它，它也是指导你编写代码的好方法。
无论采用何种方法，代码都必须易于阅读和维护。不妨考虑使用 BEM 来轻松保持代码的简洁清晰。
结论
感谢您一如既往的阅读。如果您觉得这篇文章对您有所帮助（我相信您一定觉得很有启发😉），请与您的朋友和同事分享，并关注我以获取更多内容。如果您有任何疑问，或者发现任何错误或拼写错误，请在评论区留言。