我如何迈向简洁的 CSS，以及你如何做到（使用 BEM 方法论）

大约一年半前，我还很年轻，对网站建设还很陌生。当时我主要编写静态 HTML 和 CSS 网站，同时也尝试了一些基本的原生 JavaScript。

我当时才刚开始接触 Web 开发，经验也很少。不过，尽管如此，我还是萌生了一个想法，想做一个非常简单的 Web 应用，并决心要实现它。

我想建立一个非常简单的网站，基本上将美国政客的数据汇编成可读的索引，还包括美国国会委员会和一些最新消息。

我又开始用纯 HTML 和 CSS 构建网站了。所有样式都放在一个文件中。我没有设计任何结构和架构来确保 CSS 的可读性和类名的易懂性。

我当时只是随波逐流，到处乱用连字符、下划线和驼峰命名法。当然，由于我完全不懂自己使用的样式，这个项目很快就失控了。最终，我设法让它运行起来，尽管它确实有很多 bug，而且网站在移动设备上也无法运行。

尽管我在这个项目中犯了几个明显的错误，但我还是从中吸取了教训。我知道有些事情必须改变，而且我需要一个系统来提高我的 CSS 的可扩展性，因为仅仅“顺其自然”是行不通的。

就在那时我发现了 BEM 方法。

现在，需要明确的是，BEM 并不能解决所有问题。BEM 是一个让你的 CSS 更易读、更少混乱的系统，它只是帮助改进网站 CSS 的一种方法。BEM 只是让你更接近简洁、可扩展的 CSS 一步。

好的，那么什么是 BEM？

BEM 是一个编写类名和标准化 CSS 样式特异性的系统。

BEM 代表：

• 块— 一个独立的组件，可在网站上多次使用。例如：容器、表单或导航栏。
• 元素— BEM 块的子元素。例如：按钮永远是表单块的子元素，标题永远是容器块的子元素。
• 修饰符— BEM 元素的特定视觉细节或样式。例如：两个按钮，一个带有黑色的深色修饰符，另一个带有白色的浅色修饰符。

BEM 类是什么样的？

BEM 类采用以下格式编写，并且应始终在使用 BEM 的项目中使用这些类：

请注意，BEM 类不需要包含所有内容——块不需要具有元素和修饰符，尽管它可以。

CSS 中的选择器仅用类名编写，例如：.block__element--modifier { /* styles */ }。

这个仅使用类名的选择器系统标准化了所有 CSS 特异性。CSS 特异性可能会令人困惑，因为更具体的选择器会优先于不太具体的选择器。BEM 解决了这个问题，它只用选择器的一部分来处理所有样式。

以下是一些 BEM 类名示例及其选择器：

• form__submit-button→.form__submit-button { /* styles */ }
• form→.form__submit-button { /* styles */ }
• form__slider--light→.form__slider--light { /* styles */ }
• form__slider--dark→.form__slider--dark { /* styles */ }
• header→.header { /* styles */ }
• header__cta-button→.header__cta-button { /* styles */ }

BEM 实践

这里是Codepen上 BEM 实践的示例。只需查看 HTML 中的类名和 CSS 中的选择器即可。

结论

我希望您喜欢这篇关于 BEM 的介绍。

最后我想说的是，虽然我意识到 BEM 已经过时了，而且可能会出现一些新技术使其变得不那么有用，但我发现它在我的许多项目中都是相关且有用的，主要原因如下：

• BEM 可读性高，而且你也知道 BEM 类名的含义。很多其他开发者也在使用 BEM，所以即使你自己不使用它，了解它也是很有好处的。
• BEM 使 CSS 模块化且可扩展。一旦习惯了，编写 BEM 类名和选择器就变得非常简单。当我开始使用 BEM 时，我立即感受到了它带来的好处：CSS 变得非常简洁，在样式表中添加新的块和元素也变得非常容易。
• BEM 是一种约定。很多人不喜欢约定，因为它们限制了配置。但我认为，有时约定可以为你的代码和其他代码提供一个标准，让其他开发人员更容易迁移到你的代码。
• 我发现了一个隐藏的好处：使用 BEM 一段时间后，我发现我写的 CSS 注释比以前少了很多。BEM 可以提高代码的可读性，因此有时注释就没那么必要了。

再次，我希望您发现这篇文章是使用 BEM 编写更清晰的 CSS 的有效起点。

感谢您的浏览。

— 加布里埃尔·罗穆阿尔多，2019 年 12 月 4 日