Das sieht ja nach einem spannenden Konstrukt aus.
Dieser Attribut-Selektor mit der Adressierung von Inline-Styles (
[style]) ergibt keinen Sinn, da ein Inline-Style-Attribut auf einem HTML-Element ja bereits erlaubt, beliebige Styles für das Element zu definieren.
Du kannst dir, wie du auf verrückte Weise ja schon machst, CSS (locally scoped) Custom Properties zu nutze machen, zumindest solange der Wert der Variable identisch ist mit dem entsprechenden Wert der CSS-Eigenschaft, die du setzen willst.
Beispiel:
.layout-default > * {
/* Var-Name, Default-Wert */
grid-area: var(--align, auto);
}
<div class="layout-default">
<header style="--align: top;">Header</header>
</div>
Es gibt natürlich noch schönere Varianten, die Custom Property oder allgemein Styles lokal für ein bestimmtes Element zu setzen, z.B. mit Klassen oder auch data-Attributen. Dadurch kannst du das Ganze dann auch aus einem Stylesheet heraus steuern, wobei du natürlich bei einer solch allgemeinen Herangehensweise trotzdem noch in irgendeiner Form eine Verbindung zwischen HTML und CSS herstellen musst.
Ein Beispiel mit einer Klasse:
.layout-default > * {
/* Var-Name, Default-Wert */
grid-area: var(--align, auto);
}
.layout-default > .align-top {
--align: top;
}
<div class="layout-default">
<header class="align-top">Header</header>
</div>
Wichtig: Je nachdem, was du konkret vorhast, ist es auch völlig in Ordnung und vielleicht sogar besser, das Layout einfach hartgecodet im CSS zu definieren und es nicht so flexibel anpassbar zu gestalten.
Den Ansatz, über Custom Properties eine grid-area zuzuweisen, habe ich noch nicht wirklich gesehen, was jetzt aber nicht zwangsläufig heißt, dass es falsch ist.
I.d.R. hat man halt doch ein recht klares Layout, wo feststeht, dass bestimmte Elemente immer an einer bestimmten Stelle auftauchen, bspw. Header, Footer usw..
Allein die Tatsache, dass du einen Media Query brauchst, um das Layout an bestimmte Viewportgrößen anzupassen, hat wenig damit zu tun, ob sich eine Custom Property zur flexiblen Konfiguration anbietet.
Custom Properties werden häufig für unterschiedliche kleinere Variationen von spezifischen Elementen eingesetzt oder dienen einfach als Variable für seitenweite Einstellungen wie Font Sizes, Farben, usw.
Für Layoutzwecke im Großen betrachtet würde ich eher darauf verzichten.
Was meine ich mit Variationen? Zum Beispiel, um ein Gap für ein Grid flexibel konfigurierbar zu machen (also Abstände), oder um Text in einem bestimmten Element anders auszurichten o.ä.
Häufig geschieht das nicht direkt über die Custom Property (wäre auch möglich, aber im HTML etwas umständlich), sondern über sogenannte Modifier-Klassen bzw. Utility-Klassen, wie wir es ja oben schon praktisch hatten.
Modifier-Klassen wären spezifisch auf ein Element bzw. eine bestimmte Klasse ausgerichtet, bspw. die Größe einer
.container-Klasse ändern (
.container-sm,
.container-md,
.container-lg), während Utility-Klassen global eingesetzt werden können, aber einen universellen Einsatzzweck haben, beispielsweise die Textausrichtung zu ändern (
.text-left,
.text-center,
.text-right).
Lass uns gerne mehr zu deinem Anwendungsfall wissen, dann kann man besser beurteilen, was die richtige Lösung wäre.
Wie schon gesagt, würde ich bei großen Layoutfragen dazu tendieren, ruhig den Großteil der Styles einfach fest zu definieren.
Du deutest ja mit deinem
.default-layout an, dass es noch weitere Layouts gibt, die dann wiederum ihre eigenen spezifischen Styles hätten. Insofern kann das das zentrale Steuerungselement sein, wenn es ums grobe Layout geht. Kleinigkeiten in "Komponenten" können dann z.B. mit Modifier-Klassen bzw. Utility-Klassen angepasst werden.
Schaue dir vielleicht auch nochmal die MDN-Seite zu Custom Properties an:
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties
Im Grunde vereinfachen sie hauptsächlich die Lesbarkeit und Übersichtlichkeit deines CSS, sodass man über das Projekt hinweg konsistent bleibt und z.B. nicht immer eigene Werte nutzt und stattdessen auf vordefinierte Variablen zurückgreifen kann.
Variationen von bestimmten Styles kann man auch so einfach im Stylesheet definieren bzw. dafür wie oben beschrieben bestimmte Selektoren erstellen.
Man kann halt mit den Custom Properties wie in meinem ersten Beispiel verhindern, dass man wie in deinem Code-Beispiel zehnmal
grid-area: xyz; schreibt und stattdessen nur die Custom Property ändern muss und einmal
grid-area: var(--align); definiert.
Ich hoffe, dass hilft dir soweit ein bisschen.
