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

This comment has been minimized.

Copy link

@horoyoisawa horoyoisawa commented Feb 14, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.