CSSを整形する

こんにちは！

最近ある用途で作成したCSSファイルが管理しづらかったので、フォーマットの整形をしました。その際になるべく面倒を減らしたい・・・と思い整形を補助してくれるサービスを見つけたのでご紹介します。

やりたいこと

可読性、メンテナビリティの高いCSSフォーマットに整形する
例：

.hoge {
    margin: 15px;
}

↓

.hoge { margin: 15px; }

背景

自分以外の、デザイナーやバックエンドに携わるメンバーがフロントコードをみて理解がしやすいように is-red や has-text-centered といった便利CSSを用意することがあります。
その際に、下記の様な基本のルールに則った書き方だと、行数が増えてしまいCSSファイルのメンテナビリティが落ちてしまいます。

.is-red {
    color: red !important;
}

.is-center {
    text-align: center !impotant;
}

.is-marginless {
    margin: 0 !important;
}

.mt0 {
    margin-top: 0 !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt10 {
...
...

解決法

上記の例では1クラスにつき1プロパティのシンプルな構成ですから、下記のように記載すれば見やすくなります。

.is-red {color:red !important;}
.is-center {text-align:center !impotant;}
.is-marginless {margin:0 !important;}
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:5px !important;}

ソースエディタやIDEといったコーディングツールを利用すればクラスに色がつくのでブログ上よりさらにスッキリとしたフォーマットになります。

手動で1クラスずつ整形するには時間がかかるので、 {CSS} Portal というサイトの Format CSS Code を利用します。

今回はOne Line per Style を選択肢、 After Select Insert に space を設定するだけで、先述したような形に整形できました。

f:id:shalter:20200411110149p:plain — Format CSS Codeで選択した項目

まとめ

最近は「自分がわかってればいい」から「みんながわかるフロントエンド」を目指してライブラリや、こういった便利CSSの導入を進めています。
引き継ぎに限らず、時間が経ってから改修に入った際に「どうやってたっけ」という時間を削げるのも大きなポイントだと感じています。