For Cleaner Code, Use Stylelint

We’re always looking for new ways of improving our workflow, increasing productivity and generally making life easier. If we stumble across across something that makes our code more efficient, we’re always keen to explore it.

Stylelint is the most comprehensive CSS linter we’ve found to date. As well as the usual syntax checking, it also checks the sanity of your code, highlighting mistakes that – although syntactically valid – could be completely unintentional. Smashing Mag have covered most of the bases when it comes to Stylelint, so we’d just like to highlight our five favourite features.

1. Disallow property values that are ignored due to another property value in the same rule.

Most front-end developers will agree – it’s fairly confusing which rules can be used alongside which. The more you use the rules, the more clear it becomes, but this check should expedite that process somewhat, especially for juniors.

See the documentation.

display: inline used with width, height, margin, margin-top, margin-bottom, overflow (and all variants).
display: list-item used with vertical-align.
display: block used with vertical-align.
display: flex used with vertical-align.
display: table used with vertical-align.
display: table-* used with margin (and all variants).
display: table-* (except table-cell) used with vertical-align.
display: table-(row|row-group) used with width, min-width or max-width.
display: table-(column|column-group) used with height, min-height or max-height.
float: left and float: right used with vertical-align.
position: static used with top, right, bottom, or left.
position: absolute used with float, clear or vertical-align.
position: fixed used with float, clear or vertical-align.

2. Disallow colours that are suspiciously close to being identical.

When working on long projects with multiple developers, chances are you’re going to introduce small bugs that would have been avoided if you’d watched each other code. One of those is similar colours – if two developers manage to pick two very similar (but vitally different) colours from Photoshop, you’ll introduce redundant code. This check helps prevent that.

See the documentation.

color: black; background: #010101;

3. Disallow shorthand properties that override related longhand properties.

This example makes the error appear glaringly obvious, but when you have 10 to 15 attributes it’s easy to introduce similar or duplicate attributes, especially if it’s 10 o’clock at night and you’ve been working all day!

See the documentation.

a {
    padding-left: 10px;
    padding: 20px;
}

4. Disallow features that are unsupported by the browsers that you are targeting.

We really like this one. caniuse.com is an excellent resource, but we’ve all introduced attributes we think are compatible with our requirements, only to find they’re not. (I’m looking at you opacity.) This rule uses doiuse to detect browser support – great!

See the documentation.

"> 1%, last 2 versions, ie >= 8"

5. Disallow animation and transition less than or equal to 100ms.

If you’ve introduced an animation or transition below 100ms it’s generally, though not always, going to be either missing a zero or there for debugging purposes. It’s safe to say you’ll probably not want an animation or transition that is imperceptible to the human eye, so this one is quite useful!

See the documentation.

Finally, if any of the above are useful but not needed 100% of the time, you can always introduce file or line-specific ignores.

This post is also available on Medium.