什么是CSS中的BEM约定?

21-07-26 banq

BEM代表 Block-Element-Modifier。这种命名约定非常明确,并增加了前端代码的可读性。它避免了对 HTML 元素命名不明确的情况。

该约定由三部分组成:块、元素和修饰符。

为了理解这一点,我们需要一个例子。为此,让我们举一个例子:

我们有三种类型的类:

  1. card → 块
  2. card__list / card__item → 元素
  3. card__item — blue → 修饰符

HTML 代码如下:

<div class="card">
        <h2 class="card__header">
            Card Header
        </h2>
        <ul class="card__list">
            <li class="card__item">
                List Item 1
            </li>
            <li class="card__item">
                List Item 2
            </li>
            <li class="card__item card__item--blue">
                List Item 3
            </li>
            <li class="card__item">
                List Item 4
            </li>
            <li class="card__item">
                List Item 5
            </li>
            <li class="card__item">
                List Item 6
            </li>
        </ul>
    </div>

  1. 块:这是父组件。它是完全独立和可重用的。在上面的例子中,类“ card ” 是一个块组件。
  2. 元素:这是子组件,它的存在依赖于块。此组件的命名约定以父组件类名称作为前缀。它只能有一个块类作为父组件。在上面的例子中,' card__list' 和 ' card__item'是元素。
  3. 修饰符:这是定义“元素”修改的组件。我们可能有某些组件在属性上略有不同。例如,我们可能拥有所有属性相同但颜色不同的按钮。这是修饰符起作用的时候。

 CSS 如下所示:

.card{    
    //css here
}
.card__list{
    //css here
}
.card__item{
    //css here
}
.card__item--blue{
    //css here
}

这就是 BEM 命名约定的全部内容。这不是一个硬性规定,而只是一种让 CSS 在整个应用程序中使用相同语言的方法。

猜你喜欢