Focus states belong in the design

Try using only the keyboard

Press Tab from the top of the page. You should always be able to tell where you are and what will happen if you activate the current control. When the focus indicator disappears, the page becomes much harder to navigate without a pointer.

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #a54924;
  outline-offset: 4px;
}

Keep the native fallback

Avoid resetting outline on every interactive element. The focus-visible pseudo-class lets the browser decide when a focus indicator is particularly useful, such as keyboard navigation. A clear default is more useful than a hover-only state that disappears for keyboard users.

Add a way past repeated navigation

A skip link moves straight to the main content. Keep it available to keyboard navigation and reveal it when focused. The destination needs a matching id. On a page with a long header, this saves a lot of repeated tab presses.

<a class="skip-link" href="#main">Skip to content</a>
<main id="main" tabindex="-1">
  <h1>Practical CSS notes</h1>
</main>

<style>
  .skip-link {
    position: absolute;
    left: 1rem;
    top: -8rem;
  }

  .skip-link:focus {
    top: 1rem;
  }
</style>

Test after the final styles are in place

Overflow, sticky headers, and transforms can hide a perfectly reasonable outline. Check focus in the actual page, including the footer and any form. An accessible component can still become difficult to use when placed inside a new layout.