吉本式BEM設計(BEM設計ベース)

美しいコーディングをするためのガイドラインコンテンツです。

BlockとElement : クラス名(クラス設計)ルール

BEM設計での構築を複数人で行うと、必ず出てくる問題、それは

「どこがBlockで、どこがElement」なのかが、それぞれの実装者でバラバラ。

その結果、ソースコードが汚くなる。
実はこの問題は、私の事務所でもいまだに起きています。

以前、ある案件で受注元の制作会社の実装者が「このh1要素はBlockにしましょう。」とルールを決めました。
私は、驚愕しました。

h1要素がブロックになるはずがない。

これが私の考えです。
皆さんは、いかがでしょうか。
BEM設計の経験者に、伺いたいです。
h1要素は、Blockになり得ますか。

例えば、次のようなコードがあったとします。
<h1>タイトルです。</h1>
このh1要素がもしBlockであれば、Block内に存在するElementはどれでしょうか。
Block内に必ずElementがなければいけないとBEM設計には記述はありません。
だから、良しとしますか。
であれば、Elementにしませんか。

別の実装者が言いました。
上のコードの場合は、Elementでも良いが、次のコードの場合は、Blockになりませんか。
<h1><a href="#">タイトルです。</a></h1>
この実装者の主張は、h1要素がBlockで、a要素がElementであると。
これは、言い換えれば、a要素があるh1要素は、Blockだけど、a要素がない場合は、h1要素はElementだということになります。
要は、h1要素は、Blockになったり、Elementになったりすると。

では、h1要素はElementだと、ルールを決めたら、迷うことなくなりませんか。

これが私の考えです。
何度も言いますが、コーディング速度上げる一番の考え方は「迷いをなくす」ということです。
h1要素をElementだと決めれば、迷いはなくなります。
h1要素だけではありません。
全ての要素において、「どこがBlockで、どこがElement」なのかのルールを決めます。
これが吉本式BEM設計(BEM設計ベース)です。

Blockとなる要素(タグ)

要素ルール 1
Block,Elementとなる要素(タグ)を決める(固定する)

早速ですが、次の要素(タグ)がBlockとなる要素(タグ)です。

<header> <footer> <main> <section> <article> <nav> <aside> <div>

上の要素(タグ)以外は、Blockになりません。

Elementとなる要素(タグ)

Elementとなる要素(タグ)は、Blockとなる要素(タグ)以外ということになります。

<h1〜h6> <p> <a> <span>  <dl> <dt> <dd> <table> <th> <td> <figure> <ul> <ol> <li> <img> <div>...
などのBlockとなる要素(タグ)以外の要素(タグ)

Blockになる要素(タグ)さえ決めておけば、それ以外の要素(タグ)はElementになりますので、Elementとなる要素(タグ)を覚えておく必要はありません。

ただし、1要素だけ、BlockにもElementにもなり得る要素(タグ)が存在します。

BlockにもElementにもなり得る要素(タグ)

BlockにもElementにもなり得る要素(タグ)は、div要素になります。
ただし、div要素は極力Elementとして使用すべきです。
経験上、どうしても意味のないアウトライン要素が出てきてしまいます。
これは、そもそもコンテンツ設計がよろしくないとしか言いようがありませんが、現実的に存在します。
存在してしまう以上、div要素をBlockとして使用するしか選択肢がありません。

以上が、BlockとElementについての吉本式BEM設計(BEM設計ベース)の考え方です。