什么是CSS中的BEM约定？


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 在整个应用程序中使用相同语言的方法。