Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
26
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@jiroor

BEMの命名規則とスタイルの当て方について

BEMの命名規則がいまいち分からない方は必見。
またスタイルを当てていると、いざ変更があった場合に依存関係に困ることがある人も多いハズ。
個人的な書き方を備忘録として書いておく。

おさらい

Block

構成のルートとなる要素。この要素はどこにでも置くことのできる、独立して動作するもの。

Element

Blockに紐付いて定義される子要素。Blockの要素内のパーツであり、Block要素なしでは動作しないもの。

Modifier

元となるBlockまたはElementの要素から変化した状態を表す要素。元となる要素なしでは動作しないもの。

命名規則

Block, Element, Modifierは全てkebab-caseで記述する。
Block-Element間は__で接続する。
Block-Modifier間、Element-Modifier間は_で接続する。
Modifierは状態の名前と値をセットにし、-で接続する。

Block

.box

<div class="box">
</div>
.box {
}

Block + Element

.box, .box__title, .box__description

<div class="box">
  <div class="box__title">タイトル</div>
  <div class="box__description">説明</div>
</div>
.box {
}

.box__title {
}

.box__description {
}

Block + Modifier

.box, .box_col-wh

<div class="box box_col-wh">
  <div class="box__title">タイトル</div>
  <div class="box__description">説明</div>
</div>
.box {
  background-color: #000;
}

.box__title {
  background-color: #fff;
}

.box__description {
}

.box_col-wh {
  background-color: #fff;
}

.box_col-wh > .box__title {
  background-color: #000;
}

Blockの要素の状態の変化を表現したパターン。
この場合、boxの背景が白になったり、それに依存してtitleが変化して、 box全体の状態を変化させる イメージ。

Element + Modifier

.box__title, .box__title_col-wh

<div class="box">
  <div class="box__title box__title_col-wh">タイトル</div>
  <div class="box__description">説明</div>
</div>
.box {
}

.box__title {
  background-color: #000;
}

.box__title_col-wh {
  background-color: #fff;
}

.box__description {
}

Elementの要素の状態の変化を表現したパターン。
Block + Modifierとの違いとして、 boxの状態は変化させず、それに依存しない形でtitleを変化させたい 場合、こちらを選択すべきである。

Block + Element + Element

.box__title__icon

<div class="box">
  <div class="box__title">
    <i class="box__title__icon"></i>
    タイトル
  </div>
  <div class="box__description">説明</div>
</div>
.box {
}

.box__title {
  position: relative;
}

.box__title__icon {
  content: '!';
  position: absolute;
  left: 0;
}

.box__description {
}

ただし構造を見て、依存関係を見直してもよい場合がある。
この場合、表示位置はtitleとiconの間に依存関係はあるが、見た目に依存関係はないので、下のように分けるべきである。

<div class="box">
  <div class="box__title">
    <i class="icon box__title__icon"></i>
    タイトル
  </div>
  <div class="box__description">説明</div>
</div>
.box {
}

.box__title {
  position: relative;
}

.box__title__icon {
  position: absolute;
  left: 0;
}

.box__description {
}

.icon {
  content: '!';
}

Block + 複数のModifier

.box, .box_col-wh, .box_size-s

<div class="box box_col-wh box_size-s">
  <div class="box__title">タイトル</div>
  <div class="box__description">説明</div>
</div>
.box {
  background-color: #000;
}

.box__title {
  background-color: #fff;
}

.box__description {
}

.box_col-wh {
  background-color: #fff;
}

.box_col-wh > .box__title {
  background-color: #000;
}

.box_size-s {
  width: 100px;
}

.box_size-s > .box__title {
  font-size: 0.5rem;
}

Blockの要素の状態の変化が複数だった場合を表現したパターン。
この場合、.box_col-whで色周りが変化し、.box_size_lでサイズ周りが変化しているが、
お互いに依存しないようにすることで、それぞれの状態を選択できるようになる。

<div class="box box_col-wh box_size-s">
</div>

<div class="box box_col-wh">
</div>

<div class="box box_size-s">
</div>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
26
Help us understand the problem. What are the problem?