設計の重要性 〜CSS設計について〜

「設計」といっても分野ごとに多岐に渡るため今回は特にCSSに焦点を当てて見てていこうと思います。
　CSSと聞くとHTMLとともにプログラミング入門者がWebサイトを作る際にはじめに触れる言語というイメージが強いかもしれません。スクレイピング(検証コマンド)を用いて様々なサイトの内部構造を見て、参考にしつつ、Bootstrap等のライブラリを用いてお洒落なデザインを取り入れ、見栄えを良くする。CSSの場合、見栄えを良くするための装飾的な言語に過ぎず、書くうえでの統一性やリファクタリングなどにはあまり気を使わない・・・開発現場に出るまで私はそのような考え方でした。
　しかし、node.jsやAngularなど元々フロント(クライアントサイド)のJSフレームワークを扱ううえでは、ModelとViewの設計は明確に分けられるべきものであり、View(フロント)側を担当するHTML、CSSは、構造を与える&与えられた構造をもとに装飾していくものとして、Dataを扱うModelサイドとは役割を明確に分ける必要があるということを学びました。そのため、サーバーサイドを担当する側と同様にDRYな管理が必要とされます。その理由として、システムの保守性・拡張性が挙げられます。
　具体的な点としては、普段から何気無く使っていた「img」タグをCSS側に書くことが挙げられます。私はそれまで画像を表示させようとする際には、HTML上に載せたい画像の情報を書き込むのが普通であると考えていました。しかし、これは大きな間違いで、正確な書き方は「HTMLは構造を与えるのみ」「情報はCSS上に記述する」ということでした。最初は、何をどうすればいいかわかりませんでしたが、CSS設計の書籍などを読んでその意味を把握しました。
　HTMLにはclassのみ記述し、CSSファイルに参照にすべき画像があるファイルのパスを書くことが正解でした。他にも日常的にごく当たり前に書いていたコードや習慣が開発現場では見当違いであったということがいくつもありました。その点についてはまた後日ブログで書いていこうと思います。