Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
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年後、再調査するかもしれないし、しないかもしれない。

asia-quest
DX実現を目指す企業と並走する「デジタルインテグレーター」です。 通常のシステムインテグレーションだけではなく、お客様のDXを共に考えるコンサルティングから、 DXに必要な様々なデジタルテクノロジーの専門チームを有し、お客様のゴールに向けてシステムの設計、開発、運用までを一貫して請け負います。
https://www.asia-quest.jp/
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