2019の18日目の記事です。昨日は@yuko-tsutsuiさんのRailsAdminと遊ぼう~カスタマイズ戦記~でした。はじめに弊社ではチーム内でCSSプロパティの記載順序が決まってはいましたが、人によってCSSプロパティの記載順序がバラバラであったり、新しく入社された方がその順番を覚えるのに手間となってしまう問題がありました。上記の問題を抱えている際に、私が新規サービスに携わる機会があったので、新規サービスで記載順序の見直しや、記載順序を自動で行ってくれるstylelintのorderモジュールの導入を行いました。その際orderモジュールのカスタマイズについて日本語で説明されいたものがなかったので、ここにまとめてみたいと思います。Sassを用いており、webpackは事前に入っており、npmはインストールされているということを前提としておきます。今回は、CSSプロパティの記載順序を自分でカスタマイズしたかったので、stylelint-orderプラグインを導入しました。このプラグインは本来、CSSプロパティをアルファベット順に並べるものですが、自身でカスタマイズできるようにしています。カスタマイズできるように下記のjsonファイルを作成します。(名前は任意で大丈夫です)また、今回は、Sassを使用しているのでstylelint-scssプラグインも使用しております。]}本来ならばorder/properties-orderの中に手書きで一つずつCSSプロパティを書くのですが、かなり手間になるのであらかじめ記載順序が決まっているプラグイン等があるのでそこから持ってくるのがベストです。私は、現在一番CSSプロパティが準備されているstylelint-config-recess-orderプラグインから必要なプロパティを持ってきて並び替えました。上記のコードを解説していきます。--configでCSSプロパティの記載順序を設定したjsonファイルを設定します。--fixですが、これもCSSプロパティの記載順序を並び替える上で重要で--fixがなかった場合、指定していた記載順序と違った数だけにエラーが表示されるだけで自動で並び替えを行ってくれません。--fixをつけることによって強制的にCSSプロパティを並び替えています。タスク名を入力し、タスクを走らせる。タスクを走らせると下記の画像のように勝手にCSSプロパティを並び替えてくれます。最後に今回、弊社の新規サービスでstylelintの並び替えのタスクを追加した事によって、CSSの記載順序を気にする事なく、コーディング可能な環境を作成できました。これによりプロパティが重複する等の問題も少なくなり、第三者がSCSSファイル等をいじる際も読み解きやすいSCSSファイルを運用しやすくなったのではないかと感じております。今回、このCSSプロパティの記載順序を決定する際にもチームメンバーで話し合い再度記載順序を見直すなどの良い機会になりました。皆さんもぜひCSSを効率的に運用できるように見直してみてはどうでしょうか。明日の記事は@haruka_kouyamaさんです。比較見積もりサイト「ズバット」を始め、人々の生活に寄り添う様々な情報サービス事業を展開しています。upLoginユーザーは見つかりませんでした。