전역 구성 요소 만들기: 예제가 포함된 체크리스트

Timelines are typically lists, build with <ul> and <li> -tags. But do you always need a list? If the first thing you do, is adding list-style: none; to your CSS, are you using the correct tag?

I've worked on quite a few projects, where someone decided to “CSS reset” all list-styles:

ul,
ol {
  list-style: none;
}

This is really annoying, because I typically want to show a list when I'm using <ul> or <ol> -tags, otherwise I'd chosen different tags!

Andy Bell's “CSS reset” is much nicer:

/* 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;
}

In our first Timeline-example, we'll be using plain <a> nchor-tags, since the timeline only contains <a> nchors pointing to locations within the same document.

In CSS naming, we'll consider the <a> nchors as a type of list-items anyway, and use the class tmln__item — and tmln__list for the “list wrapper”:

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

Instead of writing unique CSS for both text-directions, use CSS Logical Properties. I've . Here's the dir="rtl" version:

In this case, because we used <a> -tags, it's navigable by keyboard by default. If you'd used a <div> -tag and added a click-handler with JavaScript, you'd have to add tabindex="0" for it to recieve keyboard-focus (but please: don't go there!)

To make it usable for keyboard-users, we'll add some styles using focus-visible , thus not triggering the style, when using a pointer-device (mouse or touch):

Should :hover work intentionally on mobile devices (it acts like a “pseudo-click”), or should it be disabled?

If you only want to show :hover -styles on devices that actually support them (recommended), use:

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

If your content overflows (like our horizontal timeline), do not hide the default scrollbar (it will be hidden on mobile devices, though — but that's expected). The browsers default scrollbar can be navigated by keyboard, using the arrow-keys. You're welcome to style it, though:

Before we continue, let's check our component in Lighthouse:

Although Lighthouse finds most issues, I always — check the console for errors, and fix them.

Now, let's look into a News Timeline. In this case, we do need a list, so we'll replace the <div> and <a> nchors with <ul> and <li> -items:

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

Wow — you made it to the end! If you're primarily a JavaScript-developer, you might wonder why I:

1. Tagged this article with JavaScript †)
2. Chose the tags I did (instead of just using <div> s for everything). Here's a screenshot demonstrating why chosing the correct HTML-tags matters, if CSS for some reason fails:

Here's a Codepen with examples:

Cover photo by Andrey Grushnikov from Pexels