BEMに則ったクラス名の付け方：メディアサイズによる表示の切り替えの部分について

Question

現在コーディングをしていて、パソコンとスマホでの画像表示の切り替えをする所がありました。
BEMに則ってクラスを命名をしたいです。
PCサイズで表示する画像・スマホサイズで表示する画像はModifierにカテゴライズしていいのでしょうか？
画像のクラスは下記のような命名をしてもいいでしょうか？
よろしくお願い致します。

<header class="header">
　　<div class="headerBar">
      <p class="headerBar__tel">
         <img class="headerBar__tel_state_pc" src="img/●●●.png" alt=""><!-- pcサイズで表示、スマホサイズで非表示 -->
         <img class="headerBar__tel_state_sp" src="img/▲▲▲.png" alt=""><!-- スマホサイズで表示、pcサイズで非表示 -->
      </p>
　　</div>
</header>

Answer 1

ご記載のクラス名でも問題はないと思いますが、
きちんとBEMに沿って記述するのであれば

class="headerBar__tel--pc"
class="headerBar__tel--sp"

とかの方がいいんじゃないでしょうか。

Comments

[退会済みユーザー]

ご回答ありがとうございます。BEMにもいろんな記法がありますが、そちらの記法がメジャーなのですかね。ありがとうございます。