Sassの変数を使って少し快適にBEMを使う

cssのクラスをBEMを参考に命名しています。これにより名前の衝突の可能性を下げ安心してcssを書いていくことができます。反面、文字数が長くなるので打つのも読むの大変になります。

.my-awesome-block {
  padding: 20px;
}

.my-awesome-block__element-1 {
  > p {
    font-size: 16px;
  }
}

.my-wesome-block--modifier {
  .my-awesome-block__element-1 {
    > p {
      font-size: 24px;
    }
  }
}

Sassの機能、変数を使って読みやすくします。ファイル上部でどのようなブロック、モディファイア、エレメントが存在するかリストされる点も良いです。

$block: ".my-awesome-block";
$block-modified: "#{$block}__modifier":
$element1: "#{$block}__element-1";

#{$block} {
  padding: 20px;
}

#{$element1} {
  > p {
    font-size: 16px;
  }
}

#{$block-modified} {
  #{$element-1} {
    > p {
      font-size: 24px;
    }
  }
}