是否有一种 BEM 方法可以让我仅使用一个 div 来构建包含多个元素的 header？

Question

<header class="header">
  <div class="logo_place_header></div>
  <div class="header__title-text>Learning how to learn</div>
  <div class="header__subtitle-text><a href="#" class="header__subtitle-link>about 20 words here</a></div>
  <div class="header__main-illustration></div>
  <div class="header__square-pic></div>
</header>

header class 是弹性容器，有相对位置。大多数弹性项目都需要绝对定位。我的问题来自我的一位导师，他说除了包含 header__square 图片的那个之外，不要将 div 放在 header 中。我不明白还能如何进行。我是一个菜鸟，我为我的初学者问题道歉。我知道这个论坛都是专家。

Answer 1

您的导师可能希望您找到更合适的 HTML 元素来描述文档的含义，因为 <div> 元素是 non-semantic 我们可以改用：

表示主标题的 <h1> 元素
副标题的 <p> 元素
以及插图或徽标的 <img> 元素

由于 class 属性是全局属性，我们可以更改 HTML 元素的开始和结束标记并保持代码的 BEM 命名约定

<header class="header">
  <img class="header__logo"></img>
  <h1 class="header__title-text>Learning how to learn</h1>
  <p class="header__subtitle-text><a href="#" class="header__subtitle-link>about 20 words here</a></p>
  <img class="header__main-illustration></img>
  <div class="header__square-pic></div>
</header>

我建议查看 basic concepts of HTML and looking up the MDN HTML reference manual for elements and attributes。

是否有一种 BEM 方法可以让我仅使用一个 div 来构建包含多个元素的 header？

Is there a BEM methodology in which I can build a header with many elements using only one div?

html

css

bem