Das *g* zum Wochenende: CSS: A New Kind Of JavaScript

[1unitedpower]

Die Frage ist halt, ist man in der Lage Site-übergrifend eine einzige Style-Guideline zu vertreten, dann sind CSS-Angaben in Komponenten Gift.

Vielleicht verstehe ich dich falsch, aber das klingt für mich nach Theming. Ich habs vermutlich nicht ausführlich genug erklärt.

Ideal aber wäre, wenn eine Komponente mit ihrem eigenen Default CSS daher kommt, welche dann bedingt in toto ersetzt werden kann durch das der übergeordneten Styleguide folgende Styleheet, falls sich der Autor darum kümmert.

Du hast JavaScript, ein Default-Style ist damit kein Problem:

const styledH1 = styled.h1`color: ${props => props.theme.color || 'black'};`

Mir fallen derzeit nur iframes ein, um CSS abzukapseln. Das CSS mit ID-Selektoren vollzupfeffern ist ein no go.

Stilisierte Komponenten haben immer isolierte Scopes und du wirst nur in Ausnahmefällen mit CSS-Selektoren in Berührung kommen, weil sie vom Compiler automatisch generiert werden. Max Stoiber, einer der Erfinder von styled-components, erklärt in dem verlinkten Video wie das funktioniert und wie sie auf die Idee gekommen sind. Wenn du nur nach einer Scoping-Lösung suchst, dann gäbe es da noch css-modules