0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

BEMを実際に使ってみて

Last updated at Posted at 2018-07-21

#背景
BEMで開発すること半年たったので

#BEMとは

  • Block(Webサイトを構成するパーツ)
  • Element(Blockを構成する要素)
  • Modifire(BlockやElementの見た目を変える要素)

命名規則はMindBEMdingがベース

BEM記法
block
block__element
block__element--modifier
block--modifier
block--modifier__element

メリット/デメリットをさらっと書いてみます。

メリット
ソースコードの統一性を保つ
スタイルの汚染を防ぐ
HTML構造が明確になる
再利用・拡張性に優れる

デメリット
開発スピードが遅くなる
支持を得にくい

メリットを享受できるかどうかは、BEMをちゃんと理解しなきゃいけない

#破綻寸前になる前に

ちゃんと「コーディングルール」や「スタイルガイド」といったドキュメントを揃えておく

#BEMで躓いたところ

サムネイルとテキストがあるリストボックスです。
特にmodifierですね。。。

HTML
<div class="box">
  <div class="box__thumb">
    <img src="" alt="" class="box__thumb-image">
  </div>
  <div class="box__body">
    <div class="box__heading">Blockの見出し</div>
    <p class="box__text">テキストテキストテキストテキスト...</p>
  </div>
</div>

これを外側と画像部分を角丸にしたいとしたらどうなるか?

HTML
/* bad */
<div class="box box--soft">
  <div class="box__thumb">
    <img src="" alt="" class="box__thumb-image box__thumb-image--soft">
  </div>
  <div class="box__body">
    <div class="box__heading">Blockの見出し</div>
    <p class="box__text">テキストテキストテキストテキスト...</p>
  </div>
</div>

<style>
.box--soft { border-radius: 3px; }
.box__thumb-image--soft { border-radius: 3px; }
</style>

コンポーネントのベースにmodifierを追加し、その1つのmodifierに基づいて各子要素のスタイルを調整する

HTML
/* good */
<div class="box box--soft">
  <div class="box__thumb">
    <img src="" alt="" class="box__thumb-image">
  </div>
  <div class="box__body">
    <div class="box__heading">Blockの見出し</div>
    <p class="box__text">テキストテキストテキストテキスト...</p>
  </div>
</div>

<style>
.box--soft { border-radius: 3px; }
.box__thumb-image--soft .box__thumb-image { border-radius: 3px; }
</style>

まだBEM歴が半年なので躓いたら追記していきます:frowning2:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?