この節について
この節では第3章までにやってきたことを振り返り、要点をまとめます。
第2章で学習した最重要ポイントを振り返ろう
第2章では、以下の項目を最重要ポイントとして挙げました。
- 1モジュールにつき1ファイル作成する
- BEMの命名規則に則ってクラス名を決める
- モジュールの幅は固定しない
- 位置調整のプロパティはBlockクラスに設定しない
- 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クラスで子モジュールの幅や表示位置を調整する
mod-header-0001の作成で学んだポイントを振り返ろう
mod-header-0001の作成では、以下の項目を新たなポイントとして挙げました。
- 中に入るモジュールのことも意識しながら計画的に作成していく
mod-container-0001の作成で学んだポイントを振り返ろう
mod-container-0001の作成では、以下の項目を新たなポイントとして挙げました。
- mod-container-xxxxクラスの役割を理解する
- 隣接する兄弟要素が変化する可能性のある箇所は隣接兄弟要素セレクタでmarginを制御する
- first-childの前やlast-childの後の余白が変化する箇所は擬似クラスセレクタで親要素のpaddingを制御する
この節のおわりに
箇条書きにしたこれらのポイントを見ただけで、どのような内容だったか思い出せますか？
ご自身にとって思い出しやすい表現に変えて、すぐに確認できる場所に書き出しておいてから、実際にコーディングをするときにそれらのポイントを確認しながらコーディングしていくと良いかもしれません。
最初のうちは思い出すのに苦労するかもしれませんが、継続していくうちにパターンが身についてあまり頭を使わなくても自然とできるようになってくると思います。
チュートリアルを最後まで終えたときに、まだ身についていないと感じた場合は、2章から何回か繰り返してみるのも良いと思います。
すぐにはできなくとも、ぜひ気長に学習と実践を行なってみてください。