第3章 - まとめ

この節について

この節では第3章までにやってきたことを振り返り、要点をまとめます。

第2章で学習した最重要ポイントを振り返ろう

第2章では、以下の項目を最重要ポイントとして挙げました。

  • 1モジュールにつき1ファイル作成する
  • BEMの命名規則に則ってクラス名を決める
  • モジュールの幅は固定しない
  • 位置調整のプロパティはBlockクラスやBlockのModifierクラスに設定しない
  • Elementの影響範囲はBlock内に絞る
  • Modifierは元となるクラスと一緒に付与したときだけスタイルを適用する
  • 親セレクタ参照(&)をクラス名の一部として使用しない

この箇条書きを見返したときにどのようなルールだったか思い出せるぐらいになっておくと良いと思います。

mod-heading-0001の作成で学んだポイントを振り返ろう

mod-heading-0001の作成では、以下の項目を新たなポイントとして挙げました。

  • 使用頻度の高いスタイルをベースにする
  • Modifierクラスをむやみに定義しない
  • 2つの要素間のmarginを設定するときは後の要素に設定する
  • lv-1〜lv-6のクラスはh1〜h6タグに必ずしも付与するわけではない

mod-button-0001の作成で学んだポイントを振り返ろう

mod-button-0001の作成では、以下の項目を新たなポイントとして挙げました。

  • Modifierを効率よく分ける
  • disabledには!importantを使用してもよい
  • モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する

特に「モジュールを入れ子にする場合はモジュールを包むElementクラスで幅や表示位置を調整する」というルールは最重要ポイントとも深く関係していて、整然としたcssを長期的に保っていくために重要なルールです。
「親モジュールのElementクラスで表示位置を調整し、子モジュールはただ置くだけ」と言い換えることもできます。

mod-header-0001の作成で学んだポイントを振り返ろう

mod-header-0001の作成では、以下の項目を新たなポイントとして挙げました。

  • 中に入るモジュールのことも意識しながら計画的に作成していく

mod-container-0001の作成で学んだポイントを振り返ろう

mod-container-0001の作成では、以下の項目を新たなポイントとして挙げました。

  • mod-container-xxxxクラスの役割を理解する
  • 隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する

この節の終わりに

第3章までに学習してきたことを箇条書きにしてみましが、多く感じますか?少なく感じますか?

箇条書きにしたこれらのポイントを見ただけで、どのような内容だったか思い出せますでしょうか?
CSS設計に慣れるまでは、ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのルールを当てはめていくと良いかもしれません。

最初のうちは思い出すのに苦労するかもしれませんが、継続していくうちにパターンが身についてあまり頭を使わなくても自然とできるようになってくると思います。

チュートリアルを最後まで終えたときに、まだ身についていないと感じた場合は、2章から何回か繰り返してみるのも良いと思います。

すぐにはできなくとも、ぜひ気長に学習と実践を行なってみてください。

続きはこちら

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