• 2020年8月22日土曜日
アリスト戦記
アリスト戦記 https://blog.aristo-solutions.net/2020/08/css.html

CSS設計完全ガイド 読書感想文

僕は業務系Webシステムの開発を主業務とするのだが、ふとAmazonを観ていたらこの本が目に入った。


  • CSS設計完全ガイド ~詳細解説+実践的モジュール集

そう言えば、CSSって根本的に真面目に勉強したことが無かったな、と思って購入。

CSSのデザインパターン解説

買ってから気付いたんだけど、この本はCSSの文法を記法するものではない。

例えば、ボタンの角を丸くするには「border-radius」を使えば良い、とか、そういうことを書いているのではない。
あくまでも設計に関する考え方、デザインパターンについて述べたものだ。

例えば

  • 赤色のボタン
  • 青色のボタン
  • 大きいボタン
  • 小さいボタン

を作る必要があったらどうする?
この時、

  • .btn-red-large:赤色の大きいボタン
  • .btn-red-large:青色色の大きいボタン
  • .btn-red-small:赤色の小さいボタン
  • .btn-red-small:青色の小さいボタン

なんて、都度クラスを作っていくなんてやり方は下策
「黄色」が必要になったらまた増やすんか?

こういう時は、「色を司るクラス」と「大きさを司るクラス」に分けて、HTML側には

class="btn-red btn-large"

と書くと、取り回しが良くなるのである。

こんなように、CSSを大規模開発体制で管理する為の便利で分かり易い設計テクニック、それがこの本の内容だ。

言われてみると、ああ、確かになぁ。

僕が今まで作ってきたシステムはそんなに多種多様なCSS制御を求められるものではなかったから、無策に都度書いていっても特に問題が起きるようなことは無かった。
しかし、言われてみると、確かに無策に書いたCSSは汚いなぁ。

また、有名なCSSライブラリにBootStrapってのがあるけど、「どうしてBootStrapってこういう書き方をしているんだろう?」という点も、この本を読んで当て嵌めて考えてみると、「ああ、そういう意図があったんだ」と腑に落ちるものである。

思えば、本格的なプログラミングであるJavaとかPHPとかだったら、MVCモデルだのドメイン駆動設計だの、様々な設計理論があって、それについてはみんな熱心だろう。
しかし、CSSはチョロチョロっと書いて、「はい一丁上がり!!みたいな。

そんなくらいにしか考えてないってことが結構あって。(;^^)

この本を読んで考え方の基本を学べば、次からはビューティフルなCSSを設計できると思う。

画面開発を行う人だったら一度は目を通しておいて損は無い、良い本でした。

0 件のコメント:

コメントを投稿