Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
BEMが失敗しているパターンとその問題点

思いついたら足していく

名前にとらわれすぎ

BAD1

「コンポーネントのエレメントのエレメントのエレメントの...」として定義している

  <div class="v1-news">
    <div class="v1-news__header">NEWS</div>
    <div class="v1-news__body">
      <div class="v1-news__body__item">
        <div class="v1-news__body__item__date">2014/12/10</div>
        <div class="v1-news__body__item__text">【お知らせ】2014年12月25日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
      </div>
      <div class="v1-news__body__item">
        <div class="v1-news__body__item__date">2014/10/18</div>
        <div class="v1-news__body__item__text">【お知らせ】2014年10月18日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
      </div>
    </div>
  </div>

BAD2

BAD1をキャメルケースにしただけ

  <div class="v1-news">
    <div class="v1-news__header">NEWS</div>
    <div class="v1-news__body">
      <div class="v1-news__bodyItem">
        <div class="v1-news__bodyItemDate">2014/12/10</div>
        <div class="v1-news__bodyItemText">【お知らせ】2014年12月25日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
      </div>
      <div class="v1-news__Item">
        <div class="v1-news__bodyItemDate">2014/10/18</div>
        <div class="v1-news__bodyItemText">【お知らせ】2014年10月18日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
      </div>
    </div>
  </div>

GOOD

エレメントは全て「ブロックのエレメント」として定義する。これができない場合、すでにそれは別のブロックなのではないかを疑う。

  <div class="v1-news">
    <div class="v1-news__header">NEWS</div>
    <div class="v1-news__body">
      <div class="v1-news__item">
        <div class="v1-news__date">2014/12/10</div>
        <div class="v1-news__text">【お知らせ】2014年12月25日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
      </div>
      <div class="v1-news__item">
        <div class="v1-news__date">2014/10/18</div>
        <div class="v1-news__text">【お知らせ】2014年10月18日(木)19:00から20:00まで、サーバメンテナンスを実施致します。該当時間は、サービスの御利用ができませんので、ご容赦願います。</div>
      </div>
    </div>
  </div>

拡張性

BAD1

将来の拡張を充分に考えていない

  <div class="v1-heading1">見出し</div>

GOOD

将来の拡張を考える

  <div class="v1-header">
    <div class="v1-header__heading">見出し</div>
  </div>

上記は

  <div class="v1-header">
    <div class="v1-header__heading">見出し</div>
    <div class="v1-header__more"><a href="#">詳細</a></div>
  </div>

みたいになるかもしれない。似た例として、表やリストもある

  <table class="v1-table">
    ...
  </table>

上記は

  <div class="v1-table">
    <div class="v1-table__caption">表のキャプション</div>
    <table class="v1-table__table">
      ...
    </table>
  </div>

みたいになるかもしれない。(caption要素はその特殊性から信用できないので)

グローバルなモディファイアの有用性

  • テキストの揃え方向
  • テキストの色 (数色程度)
  • テキスト大きさ (数種類程度)

はグローバルなモディファイアにおいておくと便利。「なんでここだけ右寄せなの」を解決するための手段。これはただしあくまでも例外用。どうしてもエレメントの定義に収まらない場合にだけ使う。

BAD

<div class="v1-leadText">text</div>
<div class="v1-leadText v1-leadText--alignCenter">text</div>

<td class="v1-table__cell--alignRight">1,000</td>

GOOD

<div class="v1-leadText">text</div>
<div class="v1-leadText v1--alignCenter">text</div>

<td class="v1--alignRight">1,000</td>

ブロックの上下に余白がない

BAD

.v1-infoSection{
  margin: 0;
  border: 1px solid #ccc;
  ...
}

GOOD

通常は積んでいけるようにしておく。必要に応じて、兄弟セレクターやモディファイアで上下余白を調整する。

.v1-infoSection{
  margin: $blockMargin 0;
  border: 1px solid #ccc;
  ...
}
<div class="v1-otherBlock">...</div>

<div class="v1-infoSection">...</div>

<div class="v1-otherBlock">...</div>

奥の手だけれど、v1--blockmarginZero みたいにモディファイアで用意しておいても便利

細かい差はモディファイアーでわける

必ずしもモディファイアーでわけた方がいいとは限らない

CSSとしては、見た目が似ていれば、モディファイアーで切り分けたくなります。

しかし、見た目が似ていても、用途が異なるならそれは別のコンポーネントです。モディファイアーで分けるべきはありません。

例えば、h3thは用途は別です。


コンポーネントの粒度

コンポーネントは、HTMLのvideoタグ作る感覚。 一つのコンポーネントですべてが完結。

連続するコンポーネント

連続する場合は、

bad

<div class="myComponent">
	<div class="myComponent__body">
		内容
	</div>
	<div class="myComponent__body">
		内容
	</div>
</div>

ではなく、

good

<div class="myComponent">
	<div class="myComponent__body">
		内容
	</div>
</div>

<div class="myComponent">
	<div class="myComponent__body">
		内容
	</div>
</div>

とすると管理しやすい。

HTMLのULLIは別の要素であるように、コンポーネントも別々でそれぞれが疎結合になるようにしておくと明確!

必要なら別コンポーネントとしてコンテナー作ってもいい

<div class="myComponentList">

	<div class="myComponent">
		<div class="myComponent__body">
			内容
		</div>
	</div>

	<div class="myComponent">
		<div class="myComponent__body">
			内容
		</div>
	</div>

</div>
@horoyoisawa
Copy link

horoyoisawa commented Feb 14, 2019

ありがとうございます。
的を射た指摘だと思います。悪い例と良い例の対比はとてもわかりやすいです。
今後の開発の参考にさせていただきます。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment