html - css BEM概念

Question

我试图绕过 CSS 的 block 元素修饰符概念，但我有点困惑。这是一个示例代码

<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 概念的 block (如果不是请纠正我)但是然后什么是 <h3> and <p> block 还是元素？

这让我很震惊，所以编辑问题，

如果两者都是<h3> and <p>是 block (以防万一)这两个标签的元素可能是什么？

再次编辑

这是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 的 block

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

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

Answer 1

首先，命名和结构是个人的事情。虽然 BEM 概念很清楚。这是指南，不是法律。

阻止: 你有多少 block 、元素或修饰符取决于你有多喜欢重用你自己的代码。 block (重复元素)的数量可以根据您在自己的元素中的需要而定。我自己的准则是，只有在我知道情况会重复时才使用 block 。

block 的 CSS 指南:

1. 仅使用类名选择器
2. 没有标签名称或ids 没有依赖
3. 页面上的其他 block /元素

元素: BEM 的元素部分是其“静态”内容的 block 。这可以是非重复元素，如单独使用的标题样式、列表样式、图形元素等。您永远不会在它自己的 block 中混合其他 block 元素。 示例:

好:

<div class="logo"> <img src="/" class="logo__image"> </div>

差:

<div class="logo"> <img src="/" class="branding__logo"> </div>

元素的 CSS 指南

1. 仅使用类名选择器
2. 没有标签名称或 ID
3. 不依赖页面上的其他 block /元素

修饰符: 修饰符可用于 block 和元素，具体取决于您希望在操作发生时更改布局的程度。这可以突出一些东西来完全改变设计的外观。或者只是隐藏东西。

修饰符的 CSS 指南

1. 根据 block 级修饰符改变元素
2. 根据元素修饰符改变元素

可在此处找到有关 BEM 的更多信息:http://getbem.com/

您的代码示例:

<!-- Begin block: topbar -->
<div class="topbar">
  <div class="topbar__content">
    
    <!-- Begin block: user -->
    <div class="user">
      <img class="user__image" src="image/1.jpg" alt="">
      <div class="user__meta">
        <h3 class="user__username user__username--red"> Trump </h3>
      </div>
    </div>

    <!-- Begin block: nav -->
    <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>