An Easy Way to Handle “Real” Link vs App Link CSS


One of the annoying parts of writing CSS for a web app is assigning differences between legitimate anchor links and fake <a> elements used for buttons. I don’t know why I’ve never thought of it before but in reviewing some W3C documentation I found a good solution for normal links vs. other links. It’s going to be super obvious to you once you see the definition.

a[href] {}

So there you go, make all the <a> buttons you want and hang JS functionality on them, just avoid using the href attribute.