语义HTML和BEM CSS

Question

我正在尝试编写一个语义HTML，并尝试使用基于BEM方法的类名。

在我用完全错误的结构开始这个项目之前，我只想和你仔细检查一下这是否正确，我正在做的事情：

    <main>
      <article class="card card--light">
        <section class="card__wrapper">
          <div class="card__image">
            an image
          </div>
          <div class="card__name">
            a name
          </div>
          <div class="card__button">
            <button>Click Me</button>
          </div>
        </section>
      </article>
    </main>

所有部分都放在一篇文章里面可以吗？我是否做了太多的div？

Answer 1

对卡片使用<article>标记通常是一个很好的选择。

有一个错误，HTML5标记<article>已经在创建页面的一部分。因此，将<section>作为独生子没有任何意义。这个<section>的意思是“我是这篇文章的一部分”，但在这里并非如此。因此，您应该使用简单的<div>而不是<section>。

从全局来看，要小心使用过多的HTML5语义元素。使用额外的<div>没有什么不好的结果，这不适用于“分割内容”标签(<article>，<section>，<nav>和<aside>)。例如，屏幕阅读器将通知访问者每个新的部分。