FLOCSS（BEM）で、Elementの中にElementをネストせざるを得ない場合の対処法

Question

質問

FLOCSS（BEM）の命名規則通りにクラス名を付けようとしているところで苦戦しています。

ボタンをクリックすると、下からスライドしてくるモーダルウィンドウを作成しました。
規則では、Elementの中にElementをネストする命名はNGとなっていますが、モーダルウィンドウという特殊な部品の性質上、そこでしか使えない（ブロックの外では使えない）パーツばかりで、ネストするしかありません。

AIチャットへの質問では2つのパターンがありました。
１．特殊な部品では特別にネストを許可する。つまり、修正前のソースコードのままで問題ない。
２．次のように名前を変える。例）c-modal__window__contents__title→c-modal__title

１は本当にそれでよいのか？
２はc-modal__titleはc-modal__window__contentsの中でしか使えないことが分からなくなってしまう。

１，２どちらもしっくりきませんでしたので、
最終的にはネストせず、ハイフンでつなぐだけの方法にしましたが、他に何かよい対処法はありますでしょうか？

※CSSの構造自体を変えることは難しいため、CSSを組みなおすといったことは無しでお願いします。

修正前

<p class="js-modal-open" data-modal-id="modal1">モーダルを開く</p>
<div class="c-modal js-modal-fade" data-modal-id="modal1">
    <div class="c-modal__background js-modal-close"></div>
    <div class="c-modal__window js-modal-slide">
        <section class="c-modal__window__contents">
            <span class="c-modal__window__contents__close-button js-modal-close"></span>
            <div class="c-modal__window__contents__title">
                <h4 class="c-heading--h4">モーダルタイトル</h4>
            </div>
            <div class="c-modal__window__contents__modal-body">
                <p>モーダル本文</p>
            </div>
        </section>
    </div>
</div>

修正後

<p class="js-modal-open" data-modal-id="modal1">モーダルを開く</p>
<div class="c-modal js-modal-fade" data-modal-id="modal1">
    <div class="c-modal-background js-modal-close"></div>
    <div class="c-modal-window js-modal-slide">
        <section class="c-modal-contents">
            <span class="c-modal-contents__close-button js-modal-close"></span>
            <div class="c-modal-contents__title">
                <h4 class="c-heading--h4">モーダルタイトル</h4>
            </div>
            <div class="c-modal-contents__modal-body">
                <p>モーダル本文</p>
            </div>
        </section>
    </div>
</div>

Answer 1

この質問自体をそのままChatGPTで聞いてみた結果、それぞれが分かりやすいと思った方法で進めればよいとの内容でしたので、特にこれといった正解はないようです。

以下、ChatGPTの回答。

FLOCSS（BEM）の命名規則に従いつつ、モーダルウィンドウの特殊性を考慮する必要がありますね。モーダルウィンドウ内の要素は、他の場所では使用されないため、ネストすることが避けられない状況です。

このような場合、以下のようなアプローチを検討することができます。

パターン1: 特殊な部品では特別にネストを許可する
FLOCSS（BEM）の命名規則に厳密に従う代わりに、モーダルウィンドウ内の要素についてはネストを許可するという方針です。これにより、特殊な要素がモーダルウィンドウ内でのみ使用されることが明確になります。
修正後のコードのように、修正前のソースコードのままで問題ないです。

パターン2: 短縮したクラス名を使用する
修正後のコードのように、ネストせずにハイフンでつなぐ方法も妥当です。ただし、より意味的なクラス名を使用することで、クラス名自体が要素の関係性を示すようにします。
例えば、c-modal__titleではなく、c-modal-contents__titleのように、c-modal-contentsというブロックを導入して要素を分類します。これにより、c-modal-contents内の要素であることが明確になります。

いずれのアプローチを選んでも、FLOCSS（BEM）の原則から少し外れる形になりますが、モーダルウィンドウの特殊性を考慮して、最も理解しやすく保守しやすい方法を選ぶことが重要です。