Der Titel dieses Artikels von Sara Soueidan spricht mich an. Ich bin ein großer Fan der Idee, dass einige CSS am besten global angewendet werden und einige CSS am besten auf eine Komponente beschränkt angewendet werden. Mich interessiert weniger, *wie* das geschieht, sondern mehr, dass dieser konzeptionelle Ansatz in irgendeiner Form angewendet wird.
Sara beschreibt einen Ansatz, bei dem Komponenten standardmäßig nicht zu viel Styling haben, aber CSS Custom Properties auf sie angewendet werden, die bereit sind, Werte anzunehmen, falls Sie diese festlegen möchten.
Für jedes Muster habe ich festgestellt, dass ich dieselben Eigenschaften ändern musste, wenn ich es verwenden musste – wie Schriftart, Farben (Text, Hintergrund, Rand), Box-Schatten, Abstände usw. Daher dachte ich, es wäre nützlich und zeiteffizient, wenn ich Variablen für diese Eigenschaften erstellen, diese Variablen im 'root' der Komponente definieren und die Werte für diese Variablen 'übergeben würde', wenn ich das Muster nach Bedarf verwende. Auf diese Weise kann ich die Komponente anpassen oder thematisieren, indem ich die Eigenschaftswerte in einem Regelset ändere, anstatt zwischen mehreren wechseln zu müssen, um dies zu tun.