BEM記法で書いた同階層の要素二つにhoverで適応させたい

Question

問題に対する質問が違ったのでもう一度質問させていただきます。

BEM記法で書いていてcssはSCSS環境で書いています。
その際、hoverを使うときに、.button__linkと.button__text, .button__link::before, .button__link::afterを一つのネストで記述する場合、どう記述すればいいでしょうか？

-追記-
自分の質問が具体的じゃない状態で質問してしまい、質問の方向が変わってしまってすみません。
回答してもらった皆さん、本当にありがとうございます。

[HTML]

<div class="test">
    <div class="button">
        <a class="button__link" href="#">
              <p class="button__text">View More</p>
        </a>
     </div>
</div>

[SCSS]

.test {
    .button {
        &__link {}
        &__text {
            color: #333;
        }
        &:hover {
            &__link {
                    position: relative;
	            background-color: #333;
                    &::before {// 矢印のアイコン}
                    &::after {// 矢印のアイコン}
	        }
	        &__text {
                color: #FFF;
	        }
        }
    }
}

よろしくお願いします。

Comments

[kurokuma]

すみません、どうしてもbutton__linkとbutton__textを個別に指定したい理由が、before, afterの擬似要素をつかっていて、:hoverを使うと&__linkとなる場合, 擬似要素まで適応させれないです。具体的にするために擬似要素のコードを追加します。

Answer 1

普通に書いてはダメなんですか？

.test {
  .button {
    &__text {
      color: #333;
    }
    &__link:hover {
      position: relative;
      background-color: #333;
      &::before {
        content: "<";
      }
      &::after {
        content: ">";
      }
    }
    &__text:hover {
      color: #fff;
    }
  }
}

---

コメントを受けて追記

こういうことでしょうか……？

.test {
  .button {
    &__link {
    }
    &__text {
      color: #333;
    }
  }
}
.button {
  &__link:hover {
    position: relative;
    background-color: #333;
    &::before {
      content: "<";
    }
    &::after {
      content: ">";
    }
  }
  &__link:hover &__text {
    color: #fff;
  }
}

---

質問の変更に合わせて追記

.testをネストしないのであれば、もう少しすっきりするんですが……
BEM を使っているのに詳細度を002にしてしまうのはちょっと疑問があります。

.button {
  $button: &;
  @at-root .test {
    .button {
      &__link {
      }
      &__text {
        color: #333;
      }
      &__link:hover {
        position: relative;
        background-color: #333;
        &::before {
          content: "<";
        }
        &::after {
          content: ">";
        }
        #{$button}__text {
          color: #fff;
        }
      }
    }
  }
}

Comments

[kurokuma]

ご回答ありがとうございます。
そちらでもいいのですが、.button__linkをhoverしたときにbuttonや擬似要素(ここでいうと矢印の色変更など), &__textなどが一気に変われるようにひとつのネストでシンプルにコードをかくことはできないでしょうか？

[Lhankor_Mhy]

.button__text:hover を書きたい、という質問だと読んだのですが、そうではないということですか？

[kurokuma]

すみません、そうです。
「.button__link, .button__text, .button__link::before, .button__link::afterにひとつのネストで
書くことは可能でしょうか？」
という質問です。質問内容を修正します。

[Lhankor_Mhy]

「全てを &__link:hover 直下に置いて、ネストは1段階しか認めない」ということなのですね？　把握しました。

[kurokuma]

BEM記法は実際、ブロックの中にブロックを書かない方がいいのでしょうか？

[Lhankor_Mhy]

抜けがあったので訂正しました。

---

個人の意見ですが、詳細度を上げるようなネストは避けるべきだと思います。

BEM は、詳細度を低く保ちCSS崩壊を防ぐ、というのがそもそもの目的にあったはずです。
ですので、SCSS で BEM を書いているのに無造作に詳細度を上げている人を見ると「この人はなんのためにわざわざ面倒なBEMを採用したんだろう？」と、個人的には疑問に思うのです。

[kurokuma]

ありがとうございます、正直BEMの根本的な理由を忘れていました。
もう一度BEMを勉強し直します。

今回、私の求めている回答に一番近かったのでベストアンサーに選ばさせていただきました。
ありがとうございました。

Answer 2

こういうことでしょうか？

&:hover &{
  &__link, &__text{
    &::before{..}
    &::after{..}
  }
}

Answer 3

button__textに色指定は必要ですか？

.test {
  .button {
    &__link {
    color: #333
      &:hover {
        color: #FFF;
	background-color: #333;
      }
    }
  }
}

Comments

[kurokuma]

ご回答ありがとうございます。
HTML側のaの中のpタグを消して文字だけにしたら色が変わったのですが、そのままだとできなかったです。

[recal]

>>そのままだとできなかったです。
ん？ごめんなさい、ちょっと何を言っているのか理解できませんでした。
そのままとは？

[kurokuma]

こちらこそ言葉足らずでした、すみません。
&:hoverの中にcolor: #FFF;
を入れても動かなかったという意味です。

質問内容がややこしかったので、追記しました。

Answer 4

.button__textは.button__linkに含まれるのですから
.button__text:hoverすると常tに.button__link:hoverすることになります
したがって.button__link:hoverの設定だけすればよいでしょう

Comments

[kurokuma]

ご回答ありがとうございます。どうしてもbutton__textにも:hoverを書いて適応させたいのですが、なにか方法はないでしょうか？

[yambejp]

書いても書かなくても同じなら書かなくてよいのでは？

[kurokuma]

追記しました、似ている内容になるのですが、:hoverの後に&__linkにするとcss側では[.test .button__link:hover__link]とhoverが効かないので、[.test .button__link:hover .button__link]や[.test .button__link:hover .button__link::before]となるようにしたいです！