Bedingtes CSS basierend auf externer Modifikatorklasse - bewährte Methode?

Einführung / Hintergrund: CSS-Komponenten

Für eine relativ große Website arbeiten wir mit SASS und versuchen, CSS in Komponenten zu verwalten. Die Grundidee von Komponenten besteht darin, dass eine Komponente überall gleich aussehen sollte, unabhängig von Containerelementen weiter oben im DOM.

Also wollen wir solche Dinge vermeiden (SASS):

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

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

Wenn das Benutzerbild auf der Startseite anders aussehen soll, muss es sich stattdessen um eine andere Komponente handeln. ZB mit SASS-Vererbung oder mit einem Mixin:

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

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

Dann müssen wir das HTML auf der Startseite anpassen, damit es die andere Version des Benutzerbildes verwendet.

So weit, ist es gut. Ich habe das Obige veröffentlicht, um mein aktuelles Verständnis der CSS-Komponenten zu veranschaulichen.

Die Frage: Modifikatorklassen - gute Praxis?

Jetzt stoßen wir auf ein Problem: Einige Seiten haben einen dunklen (schwarzen) Hintergrund, daher müssen Text, Rahmen und Material weiß sein.

Dies geht irgendwie über Komponenten hinaus: Dieselbe Komponente sollte standardmäßig dunklen Text haben, aber weißen Text, wenn er sich in einem Container mit dunklem Hintergrund befindet.

Wir haben also diese großartige Idee:

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

Wir haben also eine externe "Modifikator" - oder "Kontext" -Klasse white-on-black, die die Anzeige der internen Elemente ändert.

Die Motivation ist, dass die Komponente selbst nicht für den Hintergrund eines Containerelements weiter oben im DOM verantwortlich ist.

Das funktioniert. Das einzige Problem ist, wenn wir einen weißen Hintergrundcontainer im dunklen Hintergrundcontainer haben. Aber davon abgesehen funktioniert es in Ordnung.

Die Frage ist, ob dies architektonisch eine gute Praxis ist, mit dem Hintergrund, dass versucht wird, die Komponenten unabhängig voneinander zu halten.

Eine Alternative wäre, eine andere Komponente zu haben, z. B. my-component-on-dark-bgdie von my-componentText und Rändern erbt und deren unterschiedliche Farbe hat. Aber hier muss der (z. B. PHP-) Code, der die Komponente HTML erzeugt, von außen wissen, dh ob ein dunkles BG verwendet wird. Angenommen, der PHP-Code, der die Komponente rendert, ist vom PHP-Code, der den Container rendert, getrennt. Das ist immer noch überschaubar, könnte aber ein Argument für das Muster mit einer Modifikatorklasse sein, wie oben beschrieben.

Anmerkungen

Wir stellen unseren CSS-Klassen tatsächlich ein projektspezifisches Präfix voran. Ich habe dies hier der Einfachheit halber einfach weggelassen, und weil es niemanden etwas angeht, an welchem ​​Projekt ich arbeite :).

Das scheint ein absolut vertretbares Design zu sein. Im Vergleich zu Ihrer vorgeschlagenen Alternative:

• Es gibt weniger Codeduplizierungen als das Erstellen eines separaten Satzes von Komponenten für Weiß auf Schwarz.
• Es kann verwirrend und etwas chaotisch werden, wenn Sie viele Änderungen für den Weiß-auf-Schwarz-Zustand vornehmen.

Ich denke, es ist eine Entscheidung, welches Design bevorzugt werden sollte, aber ich würde mich für Ihr gewähltes Design entscheiden, wenn die Anzahl der benutzerdefinierten Modifikationen einzelner Komponenten für Weiß auf Schwarz relativ gering wäre.