Hah! Mir war nicht klar, dass CSS Custom Properties ihr eigenes Auflösungsverhalten dafür haben, wie !important in ihren Werten funktioniert. Und das, obwohl ich einen Leitfaden darüber geschrieben habe. 😬 Aber hey, er ist jetzt aktualisiert.
Stefan Judis dokumentiert es klar. Der Punkt ist, dass !important im endgültigen Wert überhaupt nicht verwendet wird. Also
div {
--color: red !important;
color: var(--color);
color: yellow;
}Es fühlt sich irgendwie so an, als sollte red gewinnen, aber weil !important letztendlich aus dem Custom Property Wert entfernt wird, gewinnt yellow. Und das liegt nicht daran, dass die color Deklaration zuletzt kommt – wenn color: red !important; die erste Deklaration gewesen wäre, dann hätte red gewonnen.
Aber es ist nicht so, dass !important einfach entfernt und ignoriert wird; es wird auf eine gelenkte Weise verwendet, die beeinflusst, welcher Custom Property Wert gewinnt. Aber dann ist !important weg, wenn dieser Wert angewendet wird. Stefans Beispiel
div {
/*
`!important` overrules the
other `--color` definitions
*/
--color: red !important;
color: var(--color);
}
.class {
--color: blue;
}
#id {
--color: yellow;
}Das fühlt sich seltsam an (für mich), da man denken würde, dass yellow, das auf #id deklariert ist, gewinnen sollte, weil es die höchste Spezifität hat. Aber das ist der Deal mit dem gelenkten Verhalten – !important lässt red gewinnen und wird dann entsprechend auf die color angewendet.
Zwei Dinge, die man sich merken sollte
Custom Properties sind Eigenschaften, daher funktioniert
!importantauf ihnen auf die gleiche Weise.!importantist kein Teil des Property-Werts (war es auch noch nie).Ich bin mir nicht sicher, warum das überraschend sein sollte,
!importantist nicht Teil des Werts, sondern Teil der Regel, in diesem Fall beeinflusst es, wie--coloraufgelöst wird und das war's.Es IST für mich überraschend, tut mir leid.
Es ist, als ob man in JavaScript
foo = "bing bong"setzt und dannconsole.log(foo)bingausgibt, weil man einfach wissen musste, dassbongetwas ganz Besonderes ist, das aus Werten entfernt wird.Ich denke, interessanter ist, wie Schlüsselwörter wie 'inherit' und 'initial' Custom Properties beeinflussen. Es gibt keine Möglichkeit, diese Schlüsselwörter als Wert zu übergeben, so dass im folgenden Beispiel der Hintergrund von .child blau und nicht gelb wäre
.parent { --bg: blue; background: yellow; } .child { --bg: inherit; background: var(--bg); }‘initial’ ist noch interessanter, es „löscht“ die Variable (weil sie ursprünglich nicht existierte), daher wird bei späterer Verwendung mit einem Fallback – der Fallback-Wert verwendet.
#id { --bg: initial; background: var(--bg, white); }Nur eine Überlegung, aber wenn man eine konsumierbare, thematisierbare Komponente erstellt, könnte man
!importantverwenden, um „private“, unveränderliche Custom Properties zu erstellen? Auf diese Weise müsste man nicht etwas wie Sass für „interne“ Variablen verwenden (für intern geteilte und wiederholbare Codebits, die man aber nicht den Konsumenten preisgeben möchte) und Custom Props als externe Styling-API (mangels eines besseren Begriffs).Etwas, das ich besonders überraschend fand
… gibt blauen Text aus, obwohl ich roten erwarten würde