Stylelint rule for LVHFA order in link selectors.

npm install stylelint-selector-pseudo-class-lvhfa --save-dev

Add this config to your .stylelintrc:

{
	"plugins": [
		"stylelint-selector-pseudo-class-lvhfa"
	],
	"rules": [
		"plugin/selector-pseudo-class-lvhfa": true
	]
}

    a:link,
    a:visited,
    a:hover,
    a:focus,
    a:active {}
/**   ↑
 * This type of pseudo-class selector */

When specifying link pseudo-classes, always do so in this order: Link, Visited, Hover, Focus, Active. Any other order won’t work consistently. This rule is probably not valid anymore, but it helps to keep these selectors in consistent order.

For more information, read Eric Meyer’s explanation.

To help you remember this order, there are a couple of mnemonics for that:

• LoVe, HAte
• Lord Vader Hates Furry Animals
• Lord Vader's Handle Formerly Anakin
• Lord Voldemort Has Foul Ambitions

The following patterns are considered warnings:

a:visited,
a:link,
a:focus,
a:hover,
a:active {}

a:visited,
a:link,
a:active {}

The following patterns are not considered warnings:

a:link,
a:visited,
a:hover,
a:focus,
a:active {}

a:link,
a:visited,
a:active {}

MIT © Ivan Nikolić