マークアップをはじめて一番最初に悩んでしまったこと
それは クラスの命名 でした。
CSS設計手法はいくつかありますが、今回は BEM を採用したので記事にまとめてみます。
BEMとは
Block（塊）、Element（要素）、Modifier（修飾）の略
このように表します
<div class = "Block__Element--Modifier">
Blockってなに？
Elementってなに？
Modifierってなに？
__ (アンダーバー)の意味は？
--（ハイフン)の意味は？
それぞれの意味を理解するために順を追って私なりに解説します。
Block / Element / Modifier を理解する思考手順
1. WEBページはBlock(塊)の集合体であることを理解する
WEBページはヘッダーやメインコンテンツ、サイドバー、フッターなどのBlockが
集まって構成されています。
header , aside , section , nav , footer , div (main, contents) など
これらは全てBlockとして扱います。
2. Block(塊)の中には機能や役割を持ったElement(要素)があることを理解する
ヘッダー、メイン、フッターなど大きな塊が Block。
しかしBlockだけではWEBページは成り立たない。
Qiitaのヘッダーを見てみよう
サイトロゴや検索バーなど、Block(ヘッダー)を構成するElement(要素)があります。
input , button , img , svg , h , p , ul , li , a など
これらはElementとして扱われます
3. Block(塊)やElement(要素)を強調したり、状態を表すためにModifier(修飾)があることを理解する
「(複数タブがあって)現在のタブの位置を表す」
「一番上に表示されている記事(article)を区別する」
「このタイトルは大きく」
「このテキスト部分は赤く」
「ここだけ太字に」
これらは Modifiler として扱います
BEMの書き方
BlockとBlock / BlockとElementを繋ぐ際はアンダーバー２つで繋ぐ （使用頻度：高）
.block__block
.block__element
.block__block__element
Modifierはハイフン２つで繋ぎ、修飾を表す（使用頻度：少）
%h2.content__title--big # 大きいタイトル
%p.content__text--alert # 赤いテキスト(警告)
%span.content__text--emphasis # 強調
文字の強調部分や、ここだけ大きく！、ここだけ赤く！ってときに使います。
なのであまり登場しないかも。
単語の区切りはハイフンを一つ表現してOK（使用頻度：少〜中）
.top-banner # 上に配置するバナー。
.corporate-logo # 企業ロゴ
多用は避けよう。原則、一つの単語にするように努力しよう。
どうしても「このブロックは２単語じゃないと表せない…」というときのみ使用します。
SCSSの記述はこんな感じになる
.main
.contents
.contents__content
%h2.contents__content__title
タイトル
%p.contents__content__text
ネストが深いほどclass名が長くなるのは仕方ない
.main {
.contents {
&__content{
&__title {
}
&__text {
}
}
}
}
入れ子構造がHTMLと同じになるのでわかりやすい
例 ：私がヘッダー作ったときの思考手順
実際のコードを眺めてどんな感じなのかを見てみよう
↓ヘッダー。これを目指す↓
↓ブロックを細分化するときには、まず大枠をイメージすると取り掛かりやすい
- "ヘッダー"コンポーネントで一番でかい枠は
→"header" - 両サイドにpaddingを設けたいから"inner"を作る
→"header__inner" - "top"[ロゴと検索フォーム]、"nav"[ナビゲーションバー]がある
→"header__inner__top" / "header__inner__nav"(.nav) - "top"には[ロゴ]、[検索フォーム]がある
→"header__inner__top__logo" / "header__inner__top__search" - [検索フォーム]にはフォームタグがある
→"header__inner__top__search__form" - [フォーム]にはinputとbuttonがある
→"header__inner__top__search__form__input"
→"header__inner__top__search__form__button" - [ナビゲーションバー]部分も同じようにブロックを細分化
↓ 以下、実際のコード↓ ※画像はHTMLですが、実際のコーディングはHamlです
↓ SCSS (入れ子の関係がわかるので、構造が把握しやすい)
余談
blockをひたすら __ で連結させていくのは本当のBEMではないそうです。
ただし、今回課題として「SCSSを見ただけでHTMLの構造をわかるようにする」という指定があるので、この条件をクリアするためにガンガン要素を__で繋げました。