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