Style your default global links without affecting your component links

This is a little trick I've recently been implementing on any new projects. Style your default global links without affecting your component links.

a:not([class]) {
  color: #0055ff;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

This helps prevent having to overwrite your global default link styles that you have applied within your component links.

Check out the demo below:

Comments

[Brad Bodine]

Nice! Thanks for sharing. Sometimes these little things just get overlooked because we are busy thinking about the bigger things.