创建全局组件：一份包含示例的检查清单

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

当使用需要“跨界”运行、支持多种语言和书写模式的组件时，你需要一个庞大的“待办事项清单”，否则你迟早会迷失方向。

在本教程中（这是一个很大的待办事项清单），我们将创建一个时间线组件，它可以以多种方式配置，支持dir="ltr"等等dir="rtl"。

让我们深入探讨一下。

目录

• 标记语言应简洁且语义正确。
• 它对两者都适用dir="ltr"吗dir="rtl"？
• 标记语言是否应该包含微数据？
• 可以用键盘操作吗？
• 它有焦点样式吗？
• 那呢:hover？
• 它是否能随着内容长度的增加而扩展？
• 滚动和捕捉
• 使用开发工具进行测试
• 检查有效性和文件大纲
• 附赠：新闻时间线
• 结论
• 代码示例

标记语言应简洁且语义正确。

时间线通常是列表，使用 `<div>` 和 `<div>` 标签构建<ul>。<li>但你总是需要列表吗list-style: none;？如果你做的第一件事是向 CSS 添加时间线，你使用的是正确的标签吗？

我参与过不少项目，在这些项目中，有人决定“重置”所有列表样式：

ul,
ol {
  list-style: none;
}

这真的很烦人，因为我通常希望在使用或标签时显示列表，否则我会选择不同的标签！<ul><ol>

Andy Bell 的“CSS 重置”方案要好得多：

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

在我们的第一个时间线示例中，我们将使用普通的<a>锚点标签，因为时间线只包含<a>指向同一文档内位置的锚点。

在 CSS 命名中，我们无论如何都会将<a>锚点视为一种列表项，并使用类名tmln__item——以及tmln__list用于“列表包装器”的类名：

<nav class="tmln">
  <h2 class="tmln__header">Timeline</h2>
  <div class="tmln__list">
    <a class="tmln__item" href="#2021"><span data-title>2021</span></a>
    <a class="tmln__item" href="#2020"><span data-title>2020</span></a>
    <a class="tmln__item" href="#2019"><span data-title>2019</span></a>
    <a class="tmln__item" href="#2018"><span data-title>2018</span></a>
  /* etc. */
  </div>
</nav>

这是默认dir="ltr"版本：

它对两者都适用dir="ltr"吗dir="rtl"？

与其为文本方向的两种不同方向编写不同的 CSS 代码，不如使用CSS 逻辑属性。我之前写过一篇关于它们的文章。以下是相关dir="rtl"版本：

在继续之前，我们先添加一个水平版本。我们将给主元素添加一个修饰符tmln--hr：

请务必检查dir="rtl"版本：

标记语言是否应该包含微数据？

在我们仍在处理标记的时候，让我们考虑一下是否可以通过添加微数据（即schema.org）来丰富标记，从而更详细地告诉搜索引擎有关内容的信息。

您的内容是活动列表还是新闻文章列表？

Google 将“富媒体搜索结果”的结构化数据称为 schema，并创建了一个测试工具，您可以在其中粘贴网址或标记。

可以用键盘操作吗？

在这种情况下，因为我们使用了<a>`<div>` 标签，所以默认情况下可以通过键盘导航。如果您使用了 ` <div><div>` 标签并添加了 JavaScript 点击事件处理程序，则需要添加tabindex="0"代码才能使其接收键盘焦点（但请不要这样做！）。

它有焦点样式吗？

为了方便键盘用户使用，我们将添加一些样式focus-visible，这样在使用指针设备（鼠标或触摸）时就不会触发样式：

我将直接展示我们将要创建的下一种时间线的示例——只是为了向您展示如何focus-within使用它来定位可聚焦元素的父元素。

在这种情况下，box-shadow项目符号上会添加一个 a，box-shadow主框上会添加一个细微的 a，dotted outline链接本身也会添加一个 a：

那呢:hover？

应该允许:hover在移动设备上正常工作（它的作用类似于“伪点击”），还是应该禁用？

如果您只想在:hover实际支持这些样式的设备上显示它们（推荐），请使用：

@media (hover: hover) { ... }

它是否能随着内容长度的增加而扩展？

有些语言比其他语言占用更多空间：

检查不同的文本长度（或使用Google 翻译实时翻译您的内容）——根据您的布局，查看min-width（或min-inline-size），fit-content或类似内容。

滚动和捕捉

如果您的内容超出屏幕范围（例如我们的横向时间轴），请不要隐藏默认滚动条（虽然在移动设备上滚动条会被隐藏，但这属于正常现象）。您可以使用键盘上的方向键来导航浏览器的默认滚动条。当然，您也可以自定义滚动条的样式：

为了获得更美观的设计，您可以将 WebKit 中的滚动条按钮设置::-webkit-scrollbar-button为与背景相同的颜色：

和往常一样，记得检查rtl：

在移动设备上，将“scroll-snap”添加到父元素：

.tmln__list {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

在商品详情页添加以下内容：

.tmln__item {
  scroll-snap-align: start;
  scroll-margin-inline-start: value;
}

使用开发工具进行测试

在继续之前，让我们先在Lighthouse 中检查一下我们的组件：

哇——目前看来不错！

现在也是检查CSS 代码覆盖率的好时机。

按Esc键打开Chrome 开发者工具抽屉（如果尚未打开）。添加/勾选“覆盖率”选项卡：

嗯……有 9.9% 的 CSS 未使用……我们来检查一下：

啊！这是因为 CSS没有压缩，而且包含了注释。

在构建自己的组件时，请浏览整个文件，检查是否有未使用的 CSS。

检查有效性和文件大纲

虽然Lighthouse可以发现大多数问题，但我总是会验证标记——检查控制台中的错误并修复它们。

为了查看文档大纲的可视化效果，我使用了HTML5 Outliner，这是一个 Chrome 插件：

提示！在标签中添加标题（<h1>到<h6>） ，以防止大纲视图中出现<nav>大量条目。untitled NAV

附赠：新闻时间线

现在，我们来看一个新闻时间线。在这种情况下，我们需要一个列表，所以我们将把 ` <div>and`<a>锚点替换为<ul>`and`<li>项目：

<nav class="tmln tmln--box tmln--hr">
  <h2 class="tmln__header">Latest News</h2>
  <ul class="tmln__list">
    <li class="tmln__item tmln__item--active">
      <span data-title>32 mins ago</span>
      <h3 class="tmln__item-headline">Someone, somewhere, did something stupid</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ab? Sequi dolorem aspernatur ad earum! Eius nulla tempora pariatur temporibus.</p>
    </li>
  </ul>
</nav>

再次提醒，我们也要确保这个dir="rtl"版本也能正常工作：

现在，让我们把横向版本和纵向版本混合在一起：

<nav class="tmln tmln--box tmln--hr">

那么……我们来查看一下dir="rtl"版本：

重新核对清单

此时，我们需要再次回顾常规时间线组件中的所有步骤，添加或编辑焦点状态等：

结论

哇——你居然读到了最后！如果你主要是一名 JavaScript 开发人员，你可能会好奇我为什么：

1. 本文已标记JavaScript†)
2. 我选择了这些标签（而不是<div>全部都用 <s> 标签）。以下截图展示了为什么选择正确的 HTML 标签很重要，以防 CSS 由于某些原因失效：

†) 因为2 😁

代码示例

这里有一个包含示例的 Codepen 示例：

封面照片由来自 Pexels 的 Andrey Grushnikov 拍摄