Links a href

[mhulse]

a {
    color: #00e;
    text-decoration: none;
}
a:visited {
    color: #551a8b;
}
a:visited:hover,
a:hover,
a:focus,
a:focus:hover,
a:active,
a:active:hover {
    color: #e00;
    text-decoration: underline;
}

Recommended order is:

1. Link
2. Visited
3. Hover
4. Focus
5. Active

Star wars fans can remember it as: Lord Vader’s Handle Formerly Annakin

With the above example in mind, I generally write my link styles like so:

a,
a:visited {
    color: red;
    text-decoration: none;
}
a:visited:hover,
a:hover,
a:focus,
a:focus:hover,
a:active,
a:active:hover {
    color: blue;
    text-decoration: underline;
}

Note: a and a:link are synonymous and :link can be omitted (though, their specificity is different: 1 and 2 respectively).

[mhulse]

SCSS template for default, hover, focus, pressed and disabled states:

.button {

    // Default:
    &,
    &:visited {
    }
    // Hover:
    &:visited:hover,
    &:hover {
    }
    // Focus:
    &:focus,
    &:focus:hover {
    }
    // Pressed:
    &:active,
    &:active:hover {
    }
    // Disabled:
    &:disabled,
    &.button-is-disabled {
    }

}