外部修飾子クラスに基づく条件付きCSS-グッドプラクティス?
概要/背景: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コンポーネントについての私の現在の理解の図解として上記を投稿しました。 質問:モディファイヤクラス-良い習慣? 現在、問題が発生しています。一部のページの背景が暗い(黒)ため、テキスト、境界線などを白にする必要があります。 これはどういうわけかコンポーネントを超えています。同じコンポーネントにはデフォルトで暗いテキストが必要ですが、背景が暗いコンテナ内にある場合は白いテキストになります。 …