メンテナンス性を重視したcssの話

今となっては当たり前かもしれません。。ですが時々忘れてしまうことがあるので、書いておこうと思います。

そもそも経験少なかったので驚くことが多かったです

昨年10月~11月までの2か月、派遣社員として働かせていただいていた会社で学んだことです。

まだ深くプロジェクトへの理解もできていなかったとき、cssにすら私たちは触れてませんでした。ですが、元のページと同じレイアウトにする、という指示がありました。細かいmarginなども調整しなくてはいけませんでした。

「どうしよう。。。cssいじれないやん!!???」

と内心めちゃくちゃびびっていたのですが、チームリーダーのデザイナーさんが

「mb_10ってclassをつけるとmargin-bottom:10px;になるよ!」

と教えてくださったのです。
その後も、「.red」で赤文字とか「.box_L」で大きいサイズのdivで囲むだとか。
さすがに既存で設定したcssのみでは、元ページの再現は難しい部分などはありましたので、そこは新たに追記させていただけましたが、当時cssの書き方について深く考えたことのなかった私にとっては

「なんて便利な書き方なんだ!!!!!」

と非常に衝撃を受けました。

HTMLに依存しないclass名・css記述

要素に依存させずにスタイルを記述する、これだけで大分その後の修正などもしやすくなりますよね。
そのタグごとのスタイルを一つ一つ書いてしまうと、修正するのが非常にめんどうだし、同じスタイルを気づかないうちに書いてたりとかも…!
ですが、オブジェクトごとのスタイルであれば、あとから対応しているクラスをつけるだけで赤文字になったりフォントの大きさが変更できますよね。

書いてみるとこれだけのことなのですが、実際他の方が書いたコードの修正をするととてもわかるというか、感謝します。。。
感謝しますし、「あ、わかってらしゃる!さすがっす!!」ってなりますw

なるべく↑のような記述をするように心がけてはいるのですが、一度ついた癖はなかなか直せずにおります…でも、気付いた時に直せることが今の私には重要だと思っていて、気付けた時に少し嬉しくなりますw
そして気付けた後、自分が楽になります。←これ一番大きいです
今後、他の方のコードの修正やSEOの向上のために触らないといけないのですが、上記のように書かれているといいなぁと思うばかりです。もちろん私自身も誰もが修正しやすく、私自身もわかりやすいようにオブジェクトごとのスタイル記述を心がけていこうと思います!!(`・ω・´)

ご存知の方が多いとは思いますが、こちらの書籍がメンテナンス性を向上させるcssの書き方の理解を深めてくれた一冊なので、未読の方は是非是非ご一読されてみてはと思います!本当にオススメです!

コメント