第4章 4節 l-body-inner-0001のコードからポイントを読み取ろう

この節について

l-body-inner-0001のコードを読み返しながら、新しいポイントについて学んでいきましょう。

l-body-inner-0001のコードを読み返しながら新しいポイントについて学ぼう

概要

l-body-inner-0001のコードを元に説明する新しいポイントとして以下のようなことが挙げられます。

  1. bodyタグの中に最初に設置するBlockクラス名は必ずl-body-inner-から始まるクラス名にする
  2. l-body-inner-xxxxの役割を理解する

1. bodyタグの中に最初に設置するBlockクラス名は必ずl-body-inner-から始まるクラス名にする

「とてもやさしいCSS設計」では、bodyタグの中に最初に設置するBlockクラス名は必ずl-body-inner-から始まるクラス名にすることを厳格に定めています。
最初に設置するBlockクラス名のルールを厳格に定めることで、クラスの命名に迷うことを減らし、本質的なスタイル設定に集中できます。

例えば以下のようなBlockクラス名を付けることができます。

  • l-body-inner-0001
  • l-body-inner-example-name

l-body-inner-から始まるBlockクラス名であれば、後に続く文字列は数字でも複数の単語でも、任意の文字列で構いません。

Elementクラス名は、BEMの命名規則に則って任意の名前を付けてください。
前の節で作成したElementクラスを具体例として挙げると以下のようなものがありました。

  • l-body-inner-0001__header-wrapper
  • l-body-inner-0001__contents-wrapper
  • l-body-inner-0001__footer-wrapper

l-body-inner-0001ではModifierクラスを定義しませんでしたが、BEMの命名規則に則ってModifierクラスを定義することもできます。

2. l-body-inner-xxxxの役割を理解する

l-body-inner-xxxxとしていますが、さきほど説明したようにxxxxの部分はどのような文字列でも構いません。

l-body-inner-xxxxはbodyタグの中に最初に設置するBlockクラスであり、そのElementクラスでページに水平線を引くようにして、いくつかの領域に分割する役割を担います。
また、基本的に全てのページで共通利用できるところまでをl-body-inner-xxxxで作成すると考えてください。

具体例として、前の節で作成したl-body-inner-0001では以下の3つの領域に分割していることがわかります。

  • ヘッダー領域
  • コンテンツ領域
  • フッター領域

ヘッダー領域とフッター領域には、予め作成しておいたmod-header-0001とmod-footer-0001を設置しました。
モジュール同士を入れ子にしていたときと同じく、これらのモジュールのスタイルには手を加えず、ただ置くだけで済んでいます。

デザインによっては4つ以上の領域に分けることもあるとは思いますが、今回の例では上述した3つの領域に分けています。

多くの場合、l-body-inner-0001だけで足りると思いますが、一つのサイト内で全く違う構造のデザインに対応する必要が出てきた場合にはl-body-inner-0002やl-body-inner-0003などのクラスを作成して対応します。

この節のおわりに

この節では、l-body-inner-xxxxの命名規則や役割について新たに学習しました。

次の節ではコンテンツ領域内のレイアウトについて学んでいきましょう。

続きはこちら

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