css边界元概念

Question

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

<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、.block和.块页脚是边界元概念的块(如果不是的话请纠正我)，那么<h3> and <p>是块还是元素呢？

它刚刚击中我，所以编辑问题，

如果两个<h3> and <p>都是块(如果是的话)，那么这两个标记的元素可能是什么呢？

EDITed again

下面是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是边界元的块
2. user-meta__username and nav__item是边界元的元素。
3. user-meta__username-red是边界元的修饰符。

Answer 1

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

块：有多少块、元素或修饰符取决于您喜欢重用自己的代码的程度。块(重复元素)的数量可以是大的，也可以是小的，就像您在自己的项目中所希望的那样。我自己的指导原则是，只有当我知道情况会再次发生时，我才会使用一个街区。

块的CSS指南：

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

元素:边界元的元素部分是块，它是“静态”内容。这可以是不可重复的元素，如单一用途标题样式、列表样式、图形元素等。您永远不要在它自己的块中混合其他块元素。示例：

GOOD:

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

BAD:

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

CSS元素指南

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

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

CSS修饰符指南

1. 基于块级修饰符更改元素
2. 基于元素修饰符更改元素

更多关于边界元的信息可以在这里找到：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>

​

Answer 2

边界元遵循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