HTMLのBEMについて

Question

下記HTMLとSassはQ & Aのアコーディオンを作ろうとしたものです。
1つ目のコードは模範回答のもので、2つ目のコードは自作のものです。

１つ目のHTMLについての質問なのですが、BEMの観点からみて、div class="accordion＿body-in"(半角下線が入力できず全角になってます。)ではなく、div class="accordion__body--in"が正しい命名だと思うのですがどうなのでしょうか？

私自身BEMについてほとんど知識がなく、下記サイト
https://note.com/yiio/n/n0d9a8c22bf37
を見て、疑問に思ったので、的外れな質問でしたら申し訳ないです。

div class="accordion＿body-in"でも問題ないようでしたら、divタグを消してdd class="accordion__bodyにdiv class="accordion＿bodyのスタイルをまとめて当ててもいいような気がするのですがどうなのでしょうか？
実際に見てみても、レイアウトの変化は特になさそうです。
コードは2つ目のコードが、divタグを消してHTML、Sassを記述したものです。

ご回答よろしくお願い致します。

<dl class="qa_items">
  <div class="qa__item accordion">
    <dt class="accordion__head">クリックするとどうなりますか？<span class="accordion__icon"></span></dt>
    <dd class="accordion__body">
      <div class="accordion__body-in">アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。</div>
    </dd>
  </div>
</dl>

.accordion__body {
	margin: 0;
	background: #fff;
	display: none;
	border: 1px solid $color-main;
	font-weight: 700;
}

.accordion__body-in {
	padding: 12px 30px 14px 56px;
	line-height: (24 / 16);
	color: $color-main;
	position: relative;
	font-size: 16px;

	&::before {
		content: "A";
		position: absolute;
		left: 20px;
		font-weight: 700;
		top: 14px;
		font-size: 15px;
	}
}

<dl class="qa_items">      
  <div class="qa_item accordion">
    <dt class="accordion_head">クリックするとどうなる？<span class="accordion_icon"></span></dt>
    <dd class="accordion_body">アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。</dd>
  </div>
</dl>

.accordion_body {
  margin: 0;
  background: #fff;
  // display: none;
  border: 1px solid $main-color;
  font-weight: 700;
  padding: 12px 30px 14px 56px;
  color: $main-color;
  position: relative;
  line-height: (24 / 16);
  font-size: 16px;

  &::before {
    content: 'A';
    position: absolute;
    left: 20px;
    font-weight: 700;
    font-size: 15px;
    top: 14px;
  }
}

Answer 1

模範回答のサイトを見てないので断言できないのですが、accordion__body-inのinはたぶんinnerのことだと思います。box の中に box を追加するときなどによくinnerという名前が使われます。
なのでこの in という部分は--inのような Modifier ではありません。

<div class="box">
  <div class="box-inner">
  </div>
</div>

<div class="accordion__body">
  <div class="accordion__body-inner">
  </div>
</div>

ハイフンを使わず、下みたいに Element にしたらいいじゃないと思うかもしれませんが、BEM ではblock__elementという関係を順守しますので、 Element をネストするような書き方は NG とされています。
なので上のようなクラス名になったのだと思います。

Element をネストしない
一番詳しいCSS設計規則BEMのマニュアル

<!-- NG -->
<div class="accordion__body">
  <div class="accordion__body__inner">
  </div>
</div>

accordion__bodyの中にbody-inを追加した理由は制作者にしか分からないのですが、装飾のためか js で動かすために必要だったのかもしれません。もしそれが必要ないなら、なくても問題ないと思います。以下はサンプルです。よければ書き方の参考にしてみてください。

<div class="qa">
  <dl class="qa__items">
    <!-- アイテム1件分ここから -->
    <div class="qa__item accordion">
      <dt class="accordion__head">タイトル</dt>
      <dd class="accordion__body">
        <div class="accordion__body-inner">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </dd>
    </div>

    <!-- アイテム1件分ここから -->
    <div class="qa__item accordion">
      <dt class="accordion__head">タイトル</dt>
      <dd class="accordion__body">
        <div class="accordion__body-inner">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </dd>
    </div>

    <!-- アイテム1件分ここから -->
    <div class="qa__item accordion">
      <dt class="accordion__head">タイトル</dt>
      <dd class="accordion__body">
        <div class="accordion__body-inner">
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
      </dd>
    </div>
  </dl>
</div>

.qa {
  &__items {

  }

  &__item {
    
  }
}

.accordion {
  &__head {
    
  }

  &__body {
    
  }

  &__body-inner {

  }
}

Comments

[shiabinu0607]

遅くなってしまい大変申し訳ありません。

参考コード使わせていただきます！！
わかりやすい解説ありがとうございます！