This double selector technique is a sneaky way to increase specificity and avoid !important

Running into a CSS specificity issue and thinking about using !important to fix it?

You can often avoid !important by doubling the CSS selector.

Instead of this:

.card__heading {
  font-size: var(--text-l);
}
Code language: CSS (css)

Try this:

.card__heading.card__heading {
  font-size: var(--text-l);
}
Code language: CSS (css)

When you’re writing all your own CSS, this shouldn’t ever come up. But this trick can be helpful when you have to overwrite third-party styling.