この節について
mod-button-0001に続いて、mod-header-0001でもモジュールを入れ子にしています。
「モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する」という手法は、CSSをメンテナンスしやすい状態に保つうえでとても重要なものなので、復習して身につけていきましょう。
mod-header-0001のコードを読み返しながら新しいポイントについて学ぼう
概要
mod-header-0001のコードを元に説明する新しいポイントとして以下のようなことが挙げられます。
- 中に入るモジュールのことも意識しながら計画的に作成していく
1. 中に入るモジュールのことも意識しながら計画的に作成していく
mod-header-0001の中には、mod-button-0001を2つ設置しています。
当然のことと言えますが、mod-header-0001を完成させるにはmod-button-0001の作成が必要でした。
ページのデザインが確認できたら、中に入るモジュールのことも意識しながら計画的に作成していくのが理想的です。
決定されていないことまで過剰に考慮してCSSを複雑にすることは避けなければいけませんが、既に決定されている事柄や予測しやすい事柄については、意識しながら計画的に作成していくことでシンプルで管理しやすいCSSを書くことができます。
また、「第2章 2節 mod-example-0001の復習をしながらとてもやさしいCSS設計の「最重要ポイント」を学ぼう」で最重要ポイントとして挙げた「3. モジュールの幅は固定しない」というポイントを守ってモジュールを作成していれば、デザイン上で幅が異なっている箇所でも同一のモジュールで対応できるので、そのことも念頭においてモジュール作成の計画をしてみてください。
mod-button-0001で学んだポイントについて復習しよう
モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する
「モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する」という手法について、「第3章 6節 mod-button-0001のコードからポイントを読み取ろう」で詳しく説明しましたが、これは第2章で最重要ポイントに挙げた「3. モジュールの幅は固定しない」「4. 位置調整のプロパティはBlockクラスに設定しない」というポイントに関連するとても重要なポイントなので、具体例としてmod-header-0001のコードを読み返しながら復習し、知識を定着させていきましょう。
今回作成したmod-header-0001のコードを読み返してみると、以下の二つのElementクラスでボタンの幅とマージンを調整していることが読み取れます。
mod-header-0001__login-button-wrappermod-header-0001__sign-up-button-wrapper
それによって、今回も子モジュールのスタイルには手を加えることなく、予め作成しておいたボタンモジュールを「ただ置くだけ」で済ませることができました。
この節のおわりに
「第3章 6節 mod-button-0001のコードからポイントを読み取ろう」に続いて、この節でも復習した「モジュールを入れ子にする場合は親モジュールのElementクラスで子モジュールの幅や表示位置を調整する」というポイントはとても使用頻度が高く、SCSSのコードをシンプルに保つうえで重要なポイントです。
モジュールを作成する際には、第2章で最重要ポイントとして挙げた「3. モジュールの幅は固定しない」「4. 位置調整のプロパティはBlockクラスに設定しない」というポイントを守ったうえで、子モジュールのスタイルには手を加えることなく「ただ置くだけ」になるように意識することで、SCSSのコードはシンプルに保たれますので、ぜひしっかりと理解していってください。