Help us understand the problem. What is going on with this article?

stylelintのorderモジュール選定

More than 1 year has passed since last update.

やりたいこと

CSSのプロパティを自動ソート(reorder)したい

reorderするメリット

  • 順番を気にせず書いて楽できる
  • スタイルの無駄な重複を防げる
  • 読みやすくなる
  • gzipサイズが減りやすい

使用ツール

stylelint を使って自動修正する。
大昔は CSScomb を使っていて、少し前は stylefmt を使っていた。
今は stylelint--fix オプションがついて stylefmt が不要になったので、
stylelint --fix をそのまま使う。
なお prettier では reorder を実装するつもりがないので出来ない。
理由についてはこちら。
https://github.com/prettier/prettier/issues/1963

stylelintのorderモジュール選定

stylelint 自体は order plugin があるだけで、実際にどの順番でソートするのか?という点では他のモジュールをextendして使うか、自分で順番を設定する必要がある。
大量にあるCSSプロパティを手作りで順番定義するのは死ねるので、基本的には何かをextendして使うことになる。そこで、軽く調べてすぐに出て来た stylelint-order のリポジトリを調査し、その中から選ぶことにする。

package properties releases contributors Latest commit star
stylelint-config-recess-order 244 7 4 2018/3 19
stylelint-config-property-sort-order-smacss 208 12 3 2018/4 13
@jetbrains/stylelint-config 176 5 4 2018/3 3
stylelint-config-rational-order 204 2 1 2017/12 8
stylelint-config-order-bootstrap 209 1 1 2018/4 1
stylelint-config-idiomatic-order 42 2 3 2017/6 22
stylelint-config-fransvilhelm-order 121 3 1 2017/4 1

この中から、次の2点に着目して選定したい

  • 定義しているpropertiesが多いもの(少ないとsortする意味がない)
  • よくメンテされているもの

properties は多ければ多いほど良いとして、メンテされているかどうかはreleases contributors Latest commit を参考にすればいいだろうか。一応 starも載せておいた。

結論

次の2つのどっちかを使うのが良さそう

そして propertiesの多さで stylelint-config-recess-order を使うことにした。というか1年前から使っていたのだが、今回改めて調査しなおしたら、結局同じものをそのまま使うことになった。また1年後、再調査するかもしれないし、しないかもしれない。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした