拥有 BEM 收益的朋友

边界元法简介

什么是BEM？

Block 、Element和Modifier (BEM) 方法论是由Yandex开发的一种常见的 CSS 类命名约定。BEM 的核心思想是提供一种严格的方式来将 CSS 类组织成模块。BEM 通过其 CSS 类名语法来体现其目的和含义：

• 块：表示元素所在的模块或上下文。（“这是什么？”）
  • 导航
  • 页脚
  • 商品评论
• 元素：描述代码块内执行特定功能的组件。（“它做什么/显示什么？”）
  • 物品
  • 关联
  • 按钮
• 修饰符：定义块或元素的外观、状态或行为。（ “它处于什么状态？” ）
  • 积极的
  • 红色的
  • 大的

我们用两个下划线表示元素，用两个短横线表示修饰语来表示这种语法：

.navigation__item--active
.footer__link--red
.item-review__button--large

类比

为了更深入地了解它们之间的联系，可以把它们想象成一个类比。

等级制度

Car
|-- Transmission
|   -- Automatic
|   -- Manual

Person
|-- Female
|   -- Lips
|-- Male
|   -- Beard

CSS

.car {}
.car__transmission {}
.car__transmission--automatic {}
.car__transmission--manual {}

.person {}
.person--male__beard {}
.person--female__lips {}

假设我们要显示不同的类别来描述汽车的变速器。模块或块就是 `<transform>` Car。我们显示的元素Transmission是 `<transform> `，它由 `<variable>` 和`<variable>`修改或描述。AutomaticManual

在第二个例子中，我们看到修饰符位于元素之前！

如果你看一下我们的树状层级结构，这种方法就更合理了。在这个例子中，aPerson被拆分为 aFemale和Maleclass。每个修饰符都有自己的元素，例如Lipsa 或 class Beard。

创建命名层级时，务必考虑周全，注意措辞。没人愿意阅读.person--female__arm__hand--left__finger--pinky冗长的标记，否则很容易造成代码混乱。如果确实需要如此精细的命名，不妨将其拆分成子模块，以提高代码的可读性和组织性。

Sass + BEM = <3

在 Sass 文件中，组织类的一种方法是使用嵌套。

.block {
    &__element {
        &--modifier { 
        }
    }
    &--modifier {
    }
}

打印结果将为：

.block__element {}
.block__element--modifier {}
.block--modifier[]

这种架构的优点在于其可扩展性。代码以模块化方式分组，并详细描述其用途和状态。我们来看一个例子：

HTML

<ul class="tabs">
    <li class="tabs__header--active">
        <img class="tabs__content__image" src="">
    </li>
    <li class="tabs__header">
        <img class="tabs__image" src="#">
        <img class="tabs__image--inverse" src="#">
    </li>
</ul>

萨斯

.tabs {
    &__header {
        &--active {
        }    
    }
    &__image {
        &--inverse {
        }
    }
}

输出的 CSS

.tabs {

}
.tabs__header {

}
.tabs__header--active {

}
.tabs {

}
.tabs__image {

}
.tabs__image--inverse {

}

太棒了！随着应用程序的增长，这种嵌套结构使类名更易于阅读，并消除其他开发人员阅读您的代码时的猜测。

记住：Sass 代码嵌套层数不要超过三层！！

那么……为什么是BEM？

• 自文档化 CSS！它能显示 DOM 中不同节点之间的关系层次结构。
• 严格的类命名有助于实现封装，减少命名冲突或在给定上下文之外使用类的情况。
• 性能提升！
• 仅凭名称就能让其他开发者更清楚地了解一段标记代码的功能。
• 无需使用后代选择器。
• 组件样式相互解耦，并且在不同项目之间具有很高的可移植性。实际上，这意味着代码质量的提升和开发速度的加快！

简而言之，BEM 会让你更加注重细节，深思熟虑，从而提高代码质量 :)