Instead for adding the focus styles for an element on :focus we can use :focus-visible. The benefit of this is that these styles only get shown when it really makes sense. So no more annoying outline when we click a button; often the main reason for setting :focus { outline: none; }

button:focus-visible {
  outline: 2px solid purple;
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  button:focus {
    outline: 2px solid purple;
  }
}

Reference on MDN