CSS BEM記法

なんでBEMにするひつようがあるのだろうか？

htmlをこんな漢字に書く。 これだと冗長に見えるけどcssを書くときにネストしてあげる

   .notification-modal
    .notification-modal__header
      通知一覧
    .notification-modal__content

アンパサンドで書くと結構わかりやすい。 かつ、notification-modalで名前空間が作成されているから他のcssへの影響もすくなさそうだ

.notification-modal {
  width: 150px;
  height: 300px;
  background: white;
  position: absolute;
  z-index: 100;
  border: 1px solid #80808038;
  border-radius: 4px;
  top: 23px;

  &__header {
    text-align: center;
    line-height: 40px;
  }
}