CSS bersyarat berdasarkan kelas pengubah eksternal - praktik yang baik?

Pendahuluan / latar belakang: komponen CSS

Untuk situs web yang relatif besar, kami bekerja dengan SASS, dan mencoba mengelola CSS dalam komponen. Ide dasar komponen adalah bahwa komponen harus terlihat sama di mana-mana, terlepas dari elemen wadah lebih jauh di DOM.

Jadi, kami ingin menghindari hal-hal seperti ini (SASS):

// User picture component.
.user-picture {
  img {..}
}

// Override user picture for the frontpage.
body.page-front .user-picture img {..}

Sebaliknya, jika kita ingin gambar pengguna terlihat berbeda di halaman depan, itu harus menjadi komponen yang berbeda. Misalnya dengan warisan SASS, atau dengan mixin:

// User picture component.
.user-picture {
  img {..}
}

// User picture on frontpage.
.user-picture-front {
  @extend .user-picture;
  img {..}
}

Maka kita perlu menyesuaikan html di halaman depan, sehingga ia menggunakan versi yang berbeda dari gambar pengguna.

Sejauh ini bagus. Saya memposting di atas sebagai ilustrasi pemahaman saya saat ini tentang apa itu komponen CSS.

Pertanyaan: Kelas pengubah - praktik yang baik?

Sekarang kita mengalami masalah: Beberapa halaman memiliki latar belakang yang gelap (hitam), sehingga teks, garis tepi, dan yang lainnya harus berwarna putih.

Ini entah bagaimana melampaui komponen: Komponen yang sama harus memiliki teks gelap secara default, tetapi teks putih jika berada di dalam wadah dengan latar belakang gelap.

Jadi kami punya ide hebat ini:

// 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;
  }
}

Jadi kami memiliki kelas "pengubah" atau "konteks" eksternal white-on-blackyang mengubah cara elemen-elemen internal ditampilkan.

Motivasinya adalah bahwa komponen itu sendiri tidak bertanggung jawab atas latar belakang elemen wadah lebih jauh di DOM.

Ini bekerja. Satu-satunya masalah adalah jika kita memiliki wadah latar belakang putih di dalam wadah latar belakang gelap. Tapi selain itu, ini berfungsi baik.

Pertanyaannya adalah apakah ini secara arsitektur merupakan praktik yang baik, dengan latar belakang mencoba untuk menjaga komponen independen satu sama lain.

Alternatif adalah memiliki komponen yang berbeda, misalnya my-component-on-dark-bg, yang mewarisi dari my-componentdan memiliki warna berbeda untuk teks dan batas. Tapi di sini kode (misalnya PHP) yang menghasilkan komponen html perlu tahu tentang luar, yaitu, apakah bg gelap digunakan. Dengan asumsi bahwa kode PHP yang membuat komponen terpisah dari kode PHP yang membuat wadah. Yang masih dapat dikelola, tetapi bisa menjadi argumen untuk pola dengan kelas pengubah, seperti dijelaskan di atas.

Catatan

Kami sebenarnya mengawali kelas CSS kami dengan awalan khusus proyek. Saya hanya meninggalkan ini di sini untuk kesederhanaan, dan karena itu bukan urusan siapa-siapa proyek yang saya kerjakan :).

Itu tampak seperti desain yang sangat bisa dipertahankan. Dibandingkan dengan alternatif yang Anda usulkan:

• Ada lebih sedikit duplikasi kode daripada membuat komponen terpisah untuk putih-hitam.
• Mungkin membingungkan dan sedikit berantakan jika Anda memiliki banyak modifikasi untuk kondisi putih-hitam.

Saya pikir itu panggilan penilaian desain mana yang lebih disukai, tapi saya akan pergi dengan desain yang Anda pilih jika jumlah modifikasi kustom dari masing-masing komponen untuk putih-hitam relatif kecil.