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

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

BEM記法でSCSSを書く際のほんのちょっとしたテクニック

More than 1 year has passed since last update.

BEMでscssを書く際のちょっとしたテクニックです。本当にちょっとしたものです。
既に、ご紹介されている方はたくさんいますが、
最近知り、地味に感動したので、自分用のメモに残しておきます。

BEMを書いているとよくあるこんなこと

blockに対するmodifierの下位elementにスタイルを指定したいときのこんな書き方。

style.scss
// block
.block {
  width: 200px;
  height: 200px;

  // element
  &__element {
    width: 100px;
    height: 100px;
  }

  // block modifier
  &--red {
   .block__element {
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}

気に入らない点

  • &で省略して書いているのに、ここに来て記述が長くなってしまう。
  • 上記に付随して、なんか気持ち悪い。なんかダサい。

理想の書き方

あくまで理想の書き方。当たり前だが、scssの仕様上、通らない。

bad.scss
// block
.block {
  // 省略  

  // block modifier
  &--red {
   &__element{
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}

じゃあどうするか

block直下で&を変数にしておく。クラス名の場合はインターポーレションを使用する。

good.scss
// block
.block {
  // 省略
  $and: &;

  // block modifier
  &--red {
   #{$and}__element {
     width: 150px;
     height: 150px;
     background: red;
   }
  }
}

$andを使用しているが、何でもいいみたいです!
こうすることで、理想通りのスタイルを当てることができる。知らなかった。。。。

さいごに

BEMって難しい・・・

karaage_oic
永遠のβ版クリエイターです。野菜が嫌いです。
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