时间戳

首页 > 解决方案 > 是否有一种 BEM 方法，我可以只使用一个 div 构建一个包含许多元素的标题？

html - 是否有一种 BEM 方法，我可以只使用一个 div 构建一个包含许多元素的标题？

问题描述

<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__square pic 的那个之外，不要将 div 放在标题中。我不明白该怎么做。我是一个新手，我为我的初学者问题道歉。我知道这个论坛到处都是专家。

标签： htmlcssbem

解决方案

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

<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>

我建议您复习HTML 的基本概念，并查阅 MDN HTML 参考手册中的元素和属性。

推荐阅读