第3章 - 0008 mod-header-0001のコードからポイントを読み取ろう

この節について

mod-button-0001に続いて、この節のmod-header-0001でもモジュールを入れ子にしています。

「モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する」という手法は、CSSをメンテナンスしやすい状態に保つうえでとても重要なものなので、復習して身につけていきましょう。

mod-heading-0001を読み返しながら新しいポイントについて学ぼう

概要

mod-heading-0001のコードから読み取れるポイントとして以下のようなことが挙げられます。

  1. 子モジュールから計画的に作成して組み合わせる

1. 子モジュールから計画的に作成して組み合わせる

mod-header-0001の中には、mod-button-0001を2つ配置しています。
当然のことと言えますが、mod-header-0001を作成する前にはmod-button-0001の作成が必要でした。

ページのデザインが確認できたら、中に入るモジュールから順番に計画的に作成していくのが理想的です。

mod-button-0001でも学んだポイントについて復習しよう

モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する

「モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する」という手法について、「第3章 - 0006 mod-button-0001のコードからポイントを読み取ろう」で詳しく説明しましたが、第2章で最重要ポイントに挙げた「3. モジュールの幅は固定しない」「4. 位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない」の一部ともいえるとても重要なポイントなので、具体例としてmod-header-0001のコードを読み返しながら、理解を深めていきましょう。

今回作成したmod-header-0001のコードを読み返してみると、以下の二つのElementクラスでボタンの幅とマージンを調整していることが読み取れます。

  • mod-header-0001__login-button-wrapper
  • mod-header-0001__sign-up-button-wrapper

今回もこれらのElementクラスの中に設置しているmod-button-0001のスタイルには何も手を加えず、予め作成しておいたモジュールをコピー&ペーストしただけで済んでいます。

この節の終わりに

mod-button-0001に続いて、この節でも復習した「モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する」というポイントはとても使用頻度も高く、重要なポイントです。

モジュールを作成する際には最重要ポイントで挙げた以下のことを守り、

  • モジュールの幅は固定しない
  • 位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない

「親モジュールのElementクラスで表示位置を調整し、子モジュールはただ置くだけ」と覚えてください。

続きはこちら

とてもやさしいCSS設計チュートリアルの目次へ戻る