BEMにおける使いまわしするクラスの記述の仕方について

Question

現在BEMの学習中で、少し悩んでいることがあります。
BEMは「Block__Element--Modifier」形式でクラスの記述を行い、クラス同士の関係性がより明確になるのだと感じました。
ただし、共通で使いまわししているクラスを入れ込むと、いきなり流れが変わり不自然になる感じがします。
しかし、実際問題は共通のクラスを使いまわししたいので、これでいいのか。。。？と悩んでいます。

例をあげてみます。

下記のコードでいうと、「inner」と「section____ttl」は仮に、他の箇所で定義されているクラスで、ここでも使いたいクラスということにします。
なので、「about____inner」や「about__ttl」という風に記述していません。

ブロックの中にいきなり他のブロック内で使用されているクラスが出てくるのはBEM的にはありなのでしょうか？

    <section id="about">
        <div class="inner">
            <h1 class="section__ttl">このサイトについて</h1>
                    <div class="about__item">
                        <p class="about__item-ttl">タイトル</p>
                        <p class="about__item-txt">テキスト</p>
                    </div>
                    <div class="about__item">
                        <p class="about__item-ttl">タイトル</p>
                        <p class="about__item-txt">テキスト</p>
                    </div>
                </div>
        </div>
    </section>

Comments

[takopo]

</div> が2つ多いですがコードはこれで合ってますか？
about が id なのと、section__ttl の Block がないのも気になります。

[Silky]

ご指摘ありがとうございます。
Divタグについて修正しました。
aboutがidなのは、ページ内リンクで飛ばすためにid指定が必要だからです。bemのブロックではidを使わないということですが、その場合ページジャンプ用のidはどうしたらいいんですかね????

[takopo]

すみません、こちらの返信を見ていませんでした。。
idを使ってはいけないわけではないです。（自分はアンカーリンク用と js 用にしか使わないのですが使う人もいると思います。）
.about__item のブロックである .about がなかったのでそれが必要ですね。（なので、もしジャンプ用の id がいる場合は、下の回答と合わせて
<section class="about section" id="about">
とするのが良いのではないでしょうか。

[Silky]

ご返信ありがとうございます！！
なるほど、確かに以下のようにclassとidを同居するといいですね
<section class="about section" id="about">

takopoさんから教えていただいたFLOCSSの考え方も取り入れつつ、今後もBEMを積極的に使って慣れていきたいと思います。
ありがとうございました！！！

Answer 1

こんにちは！一部コードの切り出しかと思いますので
局部的な事しかわかりませんが...以下ではダメなのでしょうか？

    <section id="aboutpage">
        <div class="inner">
          <div class="section">
            <h1 class="section__ttl">このサイトについて</h1>
              <div class="about">
                <div class="about__item">
                  <p class="about__item-ttl">タイトル</p>
                  <p class="about__item-txt">テキスト</p>
                </div>
                <div class="about__item">
                  <p class="about__item-ttl">タイトル</p>
                  <p class="about__item-txt">テキスト</p>
                </div>
              </div>
          </div>
        </div>
    </section>

Comments

[Silky]

ご回答ありがとうございます！
説明が漏れていましたが、section__ttlは別の箇所(sectionブロック)で定義されたクラスであり、
それをaboutセクションで使いたいんです。。

その場合、aboutブロックの中で、いきなり単純にsection__ttlが使えますか？

Answer 2

BEMだけではSilkyさんのような問題にぶつかってしまうので、FLOCSSなどのCSS設計手法を取り入れて、そのルールに従うのが良いのではないでしょうか。
CSS設計手法を使うと、再利用・拡張しやすいCSSを作ることができるようになります。

FLOCSS

もし自分が MindBEMding をベースに FLOCSS で設計するとしたら下記のようにするかなと思います。

<section class="p-about">
  <div class="c-inner">
    <h1 class="c-ttl">このサイトについて</h1>
    <div class="p-about__item">
      <p class="p-about__item-ttl">タイトル</p>
      <p class="p-about__item-txt">テキスト</p>
    </div>
    <div class="p-about__item">
      <p class="p-about__item-ttl">タイトル</p>
      <p class="p-about__item-txt">テキスト</p>
    </div>
  </div>
</section>

• about というプロジェクトには接頭辞にp-を付けます。
• inner と ttl は共通するコンポーネントなので、接頭辞にc-を付けます。
• プロジェクトからコンポーネントを上書きできますが、その逆はできません。

つまり

.p-about .c-ttl {}

は許容されていますが、

.c-inner .p-about__item {}

のような書き方は許容されていません。ただなるべく別レイヤーへの上書きは避けたいです。

なのでもし .ttl だけ色を変えたいというような場合、下のようにModifierを使うか、

<h1 class="c-ttl c-ttl--primary">このサイトについて</h1>

.c-ttl {
  color: red;
}

.c-ttl--primary {
  color: blue;
}

もしくは.about 内だけ変えるのでしたら、

<h1 class="p-about__ttl c-ttl">このサイトについて</h1>

/* Component */
.c-ttl {
  color: red;
}

/* Project */
.p-about__ttl {
  color: blue;
}

のように .p-about のElementとして別にスタイルを設定すれば、より分かりやすい書き方になるかなと思います。

ご質問の答えとしましては、CSS設計の種類によりますが、Blockの中に他のBlock内で使用されているクラスが出てくるのは「あり」だと思います。
ただしElementはそのBlockがあることが前提なので.section__ttlを使う場合は.sectionが必要です。

Comments

[Silky]

ご回答ありがとうございます！
FLOCSSの考え方も教えていただきありがとうございます！

>ご質問の答えとしましては、CSS設計の種類によりますが、Blockの中に他のBlock内で使用されているクラスが出てくるのは「あり」だと思います。
ただしElementはそのBlockがあることが前提なので.section__ttlを使う場合は.sectionが必要です。

Sectionといったような抽象的なブロックは単体で作りづらいので以下のような形はどうでしょうか？

<section class="about section">
<div class="inner">
<h1 class="section__ttl">about</h1>
<div class="about__item">
<p class="about__item-ttl">タイトル</p>
<p class="about__item-txt">テキスト</p>
</div>
</div>
</section>

<section class="contact section">
<div class="inner">
<h1 class="section__ttl">contact</h1>
<div class="contact__item">
<p class="contact__item-ttl">タイトル</p>
<p class="contact__item-txt">テキスト</p>
</div>
</div>
</section>

[takopo]

>Sectionといったような抽象的なブロックは単体で作りづらいので以下のような形はどうでしょうか？
いいと思います。スタイルの内容が分からないのであれなのですが、FLOCSSで書くと↓のような感じでしょうか。BEMは慣れてくるととても使いやすいのでぜひ覚えてみてください！

■ html
<section class="p-about c-section">
<div class="c-inner">
<h1 class="c-section__ttl">about</h1>
<div class="p-about__item">
<p class="p-about__item-ttl">タイトル</p>
<p class="p-about__item-txt">テキスト</p>
</div>
</div>
</section>

<section class="p-contact c-section">
<div class="c-inner">
<h1 class="c-section__ttl">contact</h1>
<div class="p-contact__item">
<p class="p-contact__item-ttl">タイトル</p>
<p class="p-contact__item-txt">テキスト</p>
</div>
</div>
</section>

■ scss
// Component
.c-inner {

}

.c-section {

&__ttl {

}
}

// Project
.p-about {

&__item {

&-ttl {

}

&-txt {

}
}
}

.p-contact {

&__item {

&-ttl {

}

&-txt {

}
}
}

[Silky]

なるほど！非常に勉強になりました！BEMを用いながらも、足りないと感じたところはFLOCSSなど他のコンセプトで補って、より分かりやすいコードを書いていきたいと思います！
本当にありがとうございました！！