时间戳

首页 > 解决方案 > css BEM 概念

html - css BEM 概念

问题描述

我试图绕过 CSS 的 Block-Element-Modifier 概念，我有点困惑。这是一个示例代码

<div class="block">
    <div class="block-header">
        <h3>Block Title</h3>
    </div>
    <div class="block-content">
        <p>Lorem Ipsum</p>
    </div>
    <div class="block-footer">
        <p>Footer</p>
    </div>
</div>

我的理解是 .block、.block-header、.block-content 和 .block-footer 类是 BEM 概念的块（如果不是，请纠正我）但是什么是<h3> and <p>块或元素？

它只是打动了我，所以编辑了这个问题，

如果两者<h3> and <p>都是块（如果是的话）这两个标签的元素可能是什么？

再次编辑

这是html中的代码块

<div class="block">
    <div class="block-content">
        <div class="user-image"> <img class="user-image__image" src="image/1.jpg" alt=""> </div>
        <div class="user-meta">
            <h3 class="user-meta__username user-meta__username-red"> Trump </h3>
        </div>
        <ul class="nav">
            <li class="nav__item nav__item_active"><a class="nav__link">One</a></li>
            <li class="nav__item"><a class="nav__link">Two</a></li>
            <li class="nav__item"><a class="nav__link">Three</a></li>
        </ul>
    </div>
</div>

你能否通过上面的代码，让我知道这是否正确，

  1. .block, .block-content, .block-image, .user-meta and .nav是 BEM 的块

  2. user-meta__username and nav__item是 BEM 的元素。

  3. user-meta__username-red是 BEM 的修饰符。

标签： htmlcss

解决方案

BEM 遵循block__element--modifier 给出示例的命名约定

<ul class="menu">
  <li class="menu__item menu__item--active"></li>
  <li class="menu__item"></li>
  <li class="menu__item"></li>
  <li class="menu__item"></li>
</ul>

方块 - menu, 元素 - menu__item, 修饰符 -menu__item--active

推荐阅读