【CSSNite】『CSS設計完全ガイド』の著者による「CSS設計のキホンと王道パターン」のまとめ1-2

こんにちは。今日は先週に引き続きセミナーの内容の復習をしていこうと思います。まずは、モジュールについてです。

モジュール設計のポイント

ベースモディファイアはあまり良くないとのこと。

ちょっとわかりづらいので例を挙げると、同じレイアウトのボタンで中のアイコンだけが異なるパターンが数種類あるとする。

一つの考えとして、アイコンのスペースを確保する基礎となるモジュールをつくる。そしてそれぞれアイコンだけを定義したクラスをつくり、先ほどのベースと掛け合わせるというのがある。このベース部分がベースモディファイアですね。

しかし、問題なのはアイコンを定義したクラスをつけない場合、アイコンのスペース分の余白だけあくことになり、そのベースのモジュール単体では使えないということ。しかもそのことはクラス名だけでは予測がつかない。

確かに、アイコンを掛け合わせなければ使えないモジュールはのちに扱いづらくなるのかなと思いました。

この解決策として、半田さんは、基本のベースはよく使うアイコンを込みでモジュールとする考えを提唱していました。

つまり、例えば数あるアイコンのなかでも矢印アイコンをよく使うのであれば、矢印アイコン込みでベースモディファイアをつくるということですね＾＾

継承とは、親要素のスタイリングを引き継ぐこと。
直近の親要素から順に辿っていき、html要素に至るまでの全ての親要素のスタイリングを継承している。

ただ、全てのプロパティが継承されるわけではなく、テキスト関連は継承されるものが多い。
確かに文字サイズや行間などはよく継承させて使いますね。

”継承を使いこなす”の根底にあるのは”コード量を減らす”という意識。

コードを実行するのは機械だが、読むのは人間。
コードの見通しがいいほど人間の誤解や見落としが減り、バグが出づらくなる。変更も楽になる。

ここで、プログラミングにおいて有名な言葉を仰っていました。これには「た、確かに・・・！」と感慨深かったので書いておきますね。

”プログラムは思った通りには動かない。書かれた通りに動く”

だからうまくいかないとき、大抵は私たち人間の思い込みが原因なんですね・・・。

◎モジュールの子要素に対する変更や、モジュール自体に対する変更はモディファイアにさせる。（ボーダーをつける、角丸にするなど）
◎モジュールのレイアウト変更はコンテキストにさせる。
（モジュールをどう配置する（position）、どう余白をつける（margin）など、”モジュールとその他の要素の関わり”に関すること）

なので、もしモジュールに対しての余白の大きさが変わったら、そのモジュール自身にマージン等をつけない方が良いということですね。その場では良くてものちのち負債になってしまう可能性があるので・・・。