概要/背景：CSSコンポーネント
比較的大きなWebサイトの場合、SASSを使用して、コンポーネント内のCSSを管理しようとしています。コンポーネントの基本的な考え方は、コンポーネントはDOMの上位のコンテナ要素とは関係なく、どこでも同じように見える必要があるということです。
したがって、次のようなもの（SASS）は避けたいです。
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}
代わりに、ユーザーの写真をフロントページで違って見えるようにしたい場合は、別のコンポーネントにする必要があります。たとえば、SASS継承、またはミックスイン：
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}
次に、トップページのhtmlを調整して、異なるバージョンのユーザー画像を使用するようにする必要があります。
ここまでは順調ですね。私は、CSSコンポーネントについての私の現在の理解の図解として上記を投稿しました。
質問：モディファイヤクラス-良い習慣？
現在、問題が発生しています。一部のページの背景が暗い（黒）ため、テキスト、境界線などを白にする必要があります。
これはどういうわけかコンポーネントを超えています。同じコンポーネントにはデフォルトで暗いテキストが必要ですが、背景が暗いコンテナ内にある場合は白いテキストになります。
だから私たちはこの素晴らしいアイデアを持っています：
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}
したがってwhite-on-black、内部要素の表示方法を変更する外部「修飾子」または「コンテキスト」クラスがあります。
その動機は、コンポーネント自体がDOMの上位にあるコンテナー要素の背景に関与しないことです。
これは機能します。唯一の問題は、暗い背景のコンテナー内に白い背景のコンテナーがある場合です。しかし、これはさておき、問題なく動作します。
問題は、コンポーネントが互いに独立した状態を維持しようとすることを背景にして、これがアーキテクチャとしては良い習慣であるかどうかです。
別の方法としては、テキストや境界線my-component-on-dark-bgを継承しmy-component、色を変えるなど、異なるコンポーネントを使用することもできます。しかし、ここでは、コンポーネントhtmlを生成する（たとえばPHP）コードは、外部、つまり暗いbgが使用されているかどうかを知る必要があります。コンポーネントをレンダリングするPHPコードが、コンテナーをレンダリングするPHPコードとは別であると想定します。これはまだ管理可能ですが、上記のように、修飾子クラスを持つパターンの引数になる可能性があります。
ノート
実際には、CSSクラスにプロジェクト固有の接頭辞を付けています。簡単にするため、ここでは省略しました。私が取り組んでいるプロジェクトは誰のビジネスでもないためです。