indilog

Ruby/Rails/React/Goなどに関して自分が勉強したことなどを投稿しています

トップ > sass > BEMの書き方についてちょっとだけ勉強

BEMの書き方についてちょっとだけ勉強

sass

BEMとは

BEMとは Block 、Element 、 Modifier の頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。

それぞれの要素

Block

  • 構成のルートとなる要素
  • 継承元のクラス

    Element

  • Blockに所属する子要素
  • 単体だと存在できない
  • Blockの派生クラス

    Modifier

  • 元となるBlockまたはElementから変化した状態を表す要素
  • クラスに所属するメソッドやアトリビュート/プロパティ

書き方

結構色々と書き方があるっぽい？以下は割と共通っぽい？

Block__Element--Modifier

みたいな形で、 - Elementの前には __ (アンダースコア２つ) - Modifierの前には -- (ハイフンが２つ)

がそれぞれつく また、複数単語から成り立つそれぞれの要素は - (ハイフン１つ)を用いて単語を繋げる

他にも、 下記みたいな形で Modifier は key_valueのように書く形になるなど

.item-nav__item--state_active

例

<div class="block">
    <div class="block__element"></div>
    <div class="block__element--modifier"></div>
</div>
<div class="block--modifier">
    <div class="block--modifier__element"></div>
</div>

.block {
  width: 100px;
}

.block__element {
  width: 20px;
  margin-left: 10px;
  color: blue;
}

.block__element--modifier {
  @extend .block__element;
  color: red;
}

.block--modifier {
  @extend .block;
  margin-top: 20px;
}

.block--modifier__element {
  @extend .block__element;
  background-color: green;
}

この例を見て思ったことは

  • 確かにextendなどを使うことによってオブジェクト指向的に実装ができていてわかりやすい 😀
    • というかsass/scssなどのcssメタ言語を使わないといちいち各クラスに書かなきゃいけないので成り立たなそう 💭
    • 逆に上の方のクラスを書くときにはどのくらいがデザイン的には良い抽象化なのかを考える必要がありそう
  • 基本的にクラスはネストさせない形で書いてあげる形になる 👍
    • bootstrap とかと相性悪かったりするかも？(bootstrapはネスティングとかをしている形式で、ネストが深い方がスタイルが優先されるはずなので 💭 )
  • 要素毎にスタイルを定義する形になるので、要素ごとにファイルを分けてあげた方が良さそう 👀
    • 共通のものは共通のものでまとめる形で
  • やっぱ一つのクラス名が長すぎになる可能性が・・ 😅

その他

Roleなどを考える場合は、どちらかというとそれが Modifier になる？ タブ的なものだったら以下のような形かな 👀

.nav
  .nav__tabs
    .nav__tabs--role_teacher

参考

http://blog.ruedap.com/2013/10/29/block-element-modifier https://qiita.com/mrd-takahashi/items/07dc3b4bad027daa2884