Html css边界元概念

我试图绕过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 header、.block content和.block footer是BEM概念的块（如果不是请纠正我），但什么是

和

块或元素

编辑这个问题时，我突然想到

如果

和

都是块（如果是），那么这两个标记的元素可能是什么

再次编辑

下面是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>

王牌

一个
两个
三个

请你把上面的代码通读一遍，让我知道这是否正确

.block、.block content、.block image、.user meta和.nav

是边界元法的块

user-meta\u用户名和导航项是边界元模型的要素

user-meta\uu username-red

是边界元模型的修饰符

---

BEM遵循

块元素--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>

块-

菜单

， 元素-

菜单项

，

---

修改器-

菜单项--active

BEM遵循

块元素--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>

块-

菜单

， 元素-

菜单项

，

---

修饰符-

菜单项--active

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

块： 有多少块、元素或修饰符取决于您有多喜欢重用自己的代码。块（重复元素）的数量可以根据您在自己的项目中所希望的大小而定。我自己的指导原则是，只有当我知道情况会重复时，我才会使用块

CSS块指南：

仅使用类名选择器

没有标记名或ID不依赖于

页面上的其他块/元素

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

好：

坏：

CSS元素指南

仅使用类名选择器

没有标记名或ID

不依赖于页面上的其他块/元素

修改器： 修改器可用于块和元素，具体取决于动作发生时要更改布局的程度。这可以突出一些东西来完全改变设计外观。或者只是把东西藏起来

修改器CSS指南

基于块级修改器修改图元的步骤

基于图元修改器修改图元的步骤

有关边界元法的更多信息，请参见：

代码示例：

王牌

一个
两个
三个

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

块： 有多少块、元素或修饰符取决于您有多喜欢重用自己的代码。块（重复元素）的数量可以根据您在自己的项目中所希望的大小而定。我自己的指导原则是，只有当我知道情况会重复时，我才会使用块

CSS块指南：

仅使用类名选择器

没有标记名或ID不依赖于

页面上的其他块/元素

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

好：

坏：

CSS元素指南

仅使用类名选择器

没有标记名或ID

不依赖于页面上的其他块/元素

修改器： 修改器可用于块和元素，具体取决于动作发生时要更改布局的程度。这可以突出一些东西来完全改变设计外观。或者只是把东西藏起来

修改器CSS指南

基于块级修改器修改图元的步骤

基于图元修改器修改图元的步骤

有关边界元法的更多信息，请参见：

代码示例：

王牌

一个
两个