39
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Organization

stylelintのorderモジュール選定

やりたいこと

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
Sign upLogin
39
Help us understand the problem. What are the problem?