stylelint-selector-pseudo-class-lvhfa

Stylelint rule for LVHFA order in link selectors.

Install

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

Usage

Add this config to your .stylelintrc:

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

Details

    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

Options

true

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 {}

License

MIT © Ivan Nikolić