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

是否可以将所有部分放入文章中？我做的太多了吗？

Answer 1

使用<article>标签进行卡片通常是一个不错的选择。

有一个错误，HTML5标签<article>已经在创建页面的一部分。所以没有把<section>作为独生子女的意思。这个<section>的意思是“我是文章的一部分”，但这不是真的。所以你应该使用一个简单的<div>而不是<section>。

在全球范围内，要小心HTML5语义元素。使用额外的<div>没有不良后果，对于“切片内容”标签（<article>，<section>，<nav>和<aside>），情况并非如此。例如，屏幕阅读器将通知每个新部分的访问者。