tl;dr

ESLintっぽいCSS用のLint
PostCSSプラグインとして動作するので色々嬉しい
SCSSもだいたい使える

stylelint

ESLintのようなconfigでPostCSSプラグインとして動くstylelint。
唐揚げチャーハンのような「美味いものと美味いもの組み合わせたら絶対おいしいじゃん！」みたいなプロダクトが実際とても良かったので色々利点を記載。

導入についての手順などはすでに記事があったので、そちらへリンクしたい

CSSのLintをstylelintにする

ESLintっぽくて良い所

javascriptのLinterとしてスタンダードになってきたESLintに非常に良く似て作られているので、一度そちらを導入していればstylelintの導入はおそらくすんなり出来る。

また、ESLintの持っていた良い所をそのまま持ってきたような良さがある。

config周りがESLintにすごく近いので覚えることが少なめ

肝となるstylelintのconfigは、だいたいこんな感じで、ESLintにかなり近く作られているので、先にESLintを導入していれば覚えることは少ないはず。

{
  "plugins": [
    "../some-rule-set.js"
  ],
  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
  },
}

config関連は、下記のような部分もESLintと同様に扱える

設定はpackage.json,.stylelintrcでも設定可能。stylelint.config.jsとすればJavaScript Objectとして設定を書ける
無視対象のファイルを.stylelintignoreなどで設定できる
plugin, extendの機能がある（後述）

デフォルトでルールが設定されてないので既存プロジェクトに導入しやすい

同様のツールである CSSLint など、デフォルトでルールがたくさん設定されているLinterの場合、既存プロジェクトに導入するのは逐一ルールをdisableにするか、大量に吐き出されるであろうlintを潰さないとまともに使えない状況で困難だった（そしてだいたい途中で辛くなって挫折する）

stylelintはESLint同様、デフォルトでは何のルールも設定されてない。
この事に良し悪しはあれど、既存プロジェクトへの導入では上記のような苦悩が無く、無理なく適用可能なルールから導入していける。

extendsの機能があるので、新規プロジェクト向けにはstylelint-config-standardが使える

ルールが何もないのは新規プロジェクトでは全く無意味。
「推奨ルールがあってくれないと何を入れたらいいかわからない」という人にも安心。ESLintではeslint:recommendedがあるように、stylelint-config-standardが用意されている。

$ npm install stylelint stylelint-config-standard -D

{
  "extends": "stylelint-config-standard"
}

これでオススメルールが追加された状態になる。

もしもっと他のextendsを探したければstylelint-configのタグから探せる。

PostCSSを利用している恩恵の良い所

stylelintはパーサーとしてPostCSSを利用しているので、その恩恵にあやかれる。

gulpなどでPostCSSを利用しているなら追加するだけで良い

autoprefixerなど、PostCSSを既に導入しているプロジェクトも少なく無いだろう。そんなプロダクトにとってstylelintを導入するのはとても簡単。
既存のpostcssのpluginにstylelintとpostcssReporterを追加するだけで良い

Gulpfile.js

  :
var stylelint = require('stylelint')
var postcssReporter = require('postcss-reporter')
  :
gulp.task('postcss',  function () {
  gulp.src("path/to/css")
    .pipe(postcss([
      autoprefixer(autoprefixerOpts), 
      postcssOpacity,
      stylelint(), // これを追加
      postcssReporter({clearMessages: true}), // こっちも必要
    ]))
    .pipe(gulp.dest('./web/css'));
});

gruntのexampleやpostcssを直接扱うexampleがほしければ公式にある。

当然、Command Lineから直接叩くことも出来る。なので、gulpやらを使いたくない人はこちらを使うと良いだろう。

Scss、SugerSSなどにも対応

PostCSSがCSS-likeな言語をサポートしているScss, SugerSSなどを、stylelintでもそのまま使える（LessはExperimentalの模様）

gulpで使いたければこんな感じになる

Gulpfile.js

  :
var postcssScss = require('postcss-scss')
var stylelint = require('stylelint')
  :
gulp.task('scss-lint',  function () {
  gulp.src("path/to/scss")
    .pipe(postcss([
      stylelint(), // これを追加
      postcssReporter({clearMessages: true}), // こっちも必要
    ], {syntax: postcssScss}))
    .pipe(gulp.dest('./web/css'));
});

ただし、残念ながらno-browser-hacksなど、一部のルールはうまく扱えない¹

PostCSSと同じAPIを利用してrulesが作れる

恩恵としては地味だが、独自Ruleを作る際にPostCSSのAPIを扱えるのは利点がある。

PostCSSのpluginを書いたことがある人ならば（そんな人がどの程度いるのかは不明）すぐ書けるし、ルールをpluginに移植したくなったり、既存のpluginをルール化したい時もそんなに難しくない²。

例えばカスタムルールはこんな具合で書ける

custom-plugin.js

// ruleはpluginの一部として記載する
module.exports = stylelint.createPlugin(ruleName, function(expectationKeyword, optionsObject) {
  return function(root, result) {
     // PostCSSのRoot Nodeが取得されるので、これを利用してruleを書いていく
  }
})

その他良い所

ルール違反時のメッセージをカスタマイズ出来る

多分ESLintなどには無い（と思う）が、表示するメッセージをカスタマイズすることが出来る。これはデザイナなど非エンジニアにもフレンドリーだろう。

stylelint.config.js

{
  "color-hex-case": [ "lower", {
    "message": "色はhexで統一しましょう"
  } ]
}

Atom周り充実

linter-stylelintや.stylelintrcのアイコンなど、Atomプラグインが一通り対応されている。

stylefmtと組み合わせて自動修正

eslint --fix的な自動修正として、stylefmtというプラグインとの組み合わせが言及されている。実はまだここまで手をつけれていないが、組み合わせればかなり便利そう。

軽くコードを追ってみたが、どうもこれはPostCSSの仕様によるものらしい。 ↩
実際、no-browser-hacksなどは、stylehacksという別なPostCSSプラグインを使って作られている。 ↩

ここがすごいぞ！ stylelint！