bem约定_BEM方法论简介

最新推荐文章于 2025-03-18 20:00:00 发布

翻译最新推荐文章于 2025-03-18 20:00:00 发布 · 978 阅读

文章标签：

BEM（Block Element Modifier）是一种CSS命名约定，旨在使代码更易于阅读和维护。它通过块、元素和修饰符的概念来组织类名，提高代码的结构化和可复用性。本文介绍了BEM的基本原理，包括块作为代码结构单元，元素作为块的组成部分，以及修饰符用于改变特定元素的样式。BEM方法学有助于创建清晰的前端开发层次结构，提高开发效率。

bem约定

面对现实吧，我们所有人都希望使我们的代码更易于阅读。这样做有助于我们更快，更高效地工作，当其他人与我们合作时，我们可以保持清晰和连贯的语义。如今，CSS世界中似乎有很多标准和术语： OOCSS ， SMACSS ，BEM等！这些都是改善CSS结构的方法，今天我们将介绍BEM。

BEM代表块元素修改器。 它建议根据有关元素的属性，以结构化的方式命名类。如果您曾经见过诸如header__form—email类的类名， header__form—email BEM。使用BEM方法时，请注意，我们将仅使用类名（而不是ID）。类名使您可以在必要时重复BEM名称，并创建更一致的编码结构（在HTML和CSS / Sass文件中同时存在）。现在让我们分解一下。

块

块是元素所在的容器或上下文。可以将其视为代码的更大结构块。您可能具有页眉，页脚，侧边栏和主要内容区域；每个都将被视为一个块。看一下下面的图片：

block元素构成了类的根，并且将始终排在第一位。只需知道一旦定义了块，就可以开始命名元素了。

元件

元素是一块块。块是整体，元素是片段。每个元素都写在由两个下划线连接的块之后。

.block__element

我知道这看起来有些奇怪，但是一旦开始使用它，您会想知道如何在没有CSS的情况下编写CSS！双下划线允许您快速直观地导航和操作代码。

以下是元素方法学如何工作的一些示例：

.header__logo {} 
.header__tagline {} 
.header__searchbar {}
.header__navigation {}

如您所见，还有创造力和使这种方法成为您自己的方法的空间。 “导航”可以更改为“导航”，“标语”可以更改为“ tag”或“ tagLine”。关键是要使名称简单，清晰和准确。不要过度考虑它，因为您的样式表和html将保持干燥（不要重复自己）。当您找到适合您的更好的语义时，更新类名就不成问题了（只是尝试坚持下去！）。元素将成为类名称的核心，从而帮助您了解如何构建样式表以及如何管理布局。

修饰符

现在，它变得有趣了（如果您还没有玩的开心！）当您为一个类命名时，其目的是帮助使该元素可重复，因此，如果元素样式不同，则不必在网站的其他区域编写新的类。是相同的。当您需要修改特定元素的样式，你可以使用修改器要做到这一点，你加一个双连字符（当然！） --元素（或块）之后。这是一个简短的例子

.block--modifier {}
.block__element--modifier {}

这些要小心！请记住，除非绝对必要，否则您想使一切保持简单，而不必重复自己或创建额外的类。让我们用将网站标题作为代码块的代码来讨论它：

.header__navigation {}
.header__navigation--secondary {}

如果使用辅助导航，则可能是布局和间距是相同的，但是辅助导航是不同的颜色。您可以复制原始样式，也可以使用预处理器，甚至更好。使用Sass，您可以@extend主元素（以便辅助元素继承所有属性）并更改适当的样式。

.header__navigation { 
    background: #008cba; 
    padding: 1rem 0; 
    margin: 2rem 0; 
    text-transform: uppercase; 
    } 
    
.header__navigation--secondary { 
    @extend .header__navigation;
    background: #dfe0e0; 
    }

您可能会想自己“但是班级名称太长了！” 我的观察方式：BEM类名是特定的，清晰的，易于在html中读取的，并清楚地传达了它们的用途。

对于BEM类名，我也很喜欢，您只需为每个html标签使用一个类名。看一看它如何适用于标签。标准选择器：

.label .label-default {} 
.label .label-alert {}

与BEM选择器：

.label {}
.label--alert {}

诸如Sass（特别是Scss）之类的语言使我们能够快速让元素共享相同的样式，但有小的例外。下面的示例防止我们复制样式，而只是更改所需的内容。我非常喜欢BEM方法学，是因为我不必组合诸如“ panel panel-default col-md-3 ”之类的模棱两可的类。如果使用像Foundation这样的框架，则可以开始利用mixin。但是，举一个简单的例子，让我们对刚刚定义的标签进行样式设置。

.label { 
    background: #eee; 
    border-radius: 505; 
    color: #333; 
    font-size: 1rem; 
    } 
    
.label--alert { 
    @extend .label; 
    background: #da4531; 
    color: #fff; 
    }

结论

简而言之，BEM就是这样。如您所见，还有更多值得探索的地方。 BEM是一个不断发展的系统，它使您可以使代码更加清晰，并帮助您更好地定义和设置前端开发的层次结构。

从我的个人经验来看，它极大地帮助了我更有效地构建原型，并更快地过渡到生产级代码！

您对BEM有什么想法，对您的Tuts +读者有什么建议，技巧或窍门？在下面的评论中让我们知道！

翻译自: https://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403

bem约定