今回は、色だけ違うパーツをコーディングする方法についてまとめました。
デザインを忠実にコーディング出来るようになったら、次は保守運用を意識してコーディング出来るようになりましょう。
これから赤色と青色と緑色のボタンを作成しつつ、保守運用的に悪いコーディングと良いコーディングを例に解説していきます。
保守運用的に良くないコーディング例
まずは良くないコーディング例から。
デモサイトはこちら。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
見た目的には問題はありません。
しかし、どのボタンでも使われている幅などのスタイルを共通化していないため、例えばborder-radiusの数値を現状の10pxから20pxに変更したい場合、3つのボタン共にborder-radiusの値を修正する必要が出てきます。
今は3つだけなのでそこまで手間はかかりませんが、もし数十箇所ある場合はかなり修正が面倒になります。
保守運用的に良いコーディング例
次は保守運用を意識したコーディング例です。
デモサイトはこちら。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
先程のデモサイトと違い、3つのボタンで共通に使われているスタイルをbuttonクラスにまとめ、色だけは別に指定するマルチクラスで対応しています。
共通のクラスと色だけのクラスに分けることで、buttonクラスのborder-radiusの数値を10pxから20pxしたら全てのボタンに修正が反映されます。
こちらの方が修正が楽で且つ少ないコード量で済むメリットがあります。
まとめ
以上が、「色だけ違うパーツを効率的にコーディングする方法」でした。
保守運用を意識することで、コーディングの効率化を図ることができるので、是非意識してみてください。
