Erweitertes Inline-Styling durch CSS Scopes

Eins der schwierigsten Dinge in der Software-Entwicklung ist es, Dinge zu benennen. Das ist eins von den Vorteilen, die Tailwind CSS bietet. Aber auch mit HTML und dem style hast du diesen Vorteil. Du musst in diesem Fall den Button keinen Klassennamen geben:

<button
    style="background: rebeccapurple;
        color: white;
        border: none;
        border-radius: .5rem;
        padding: .5rem .7rem;"
>
    Click me
</button>

Das kann für viele Fälle funktionieren. Kann aber einerseits schnell unübersichtlich werden, das style-Attribut, gerade für mehrere Regeln auszureizen. Auch hast nicht die Möglichkeit weitere Selektoren zu nutzen, du kannst also nicht Styles für :hover, :focus usw. setzen. Das geht nur mit "richtigem" CSS, also z.B. innerhalb eines <style>-Elements:

<style>
    button {
        background: rebeccapurple;
        color: white;
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem 0.7rem;
    }
    button:hover {
        background: color-mix(in oklch, black 10%, rebeccapurple);
    }
</style>

<button>Click me</button>

Das funktioniert. Jetzt ist aber der Effekt verloren gegangen, dass sich die Styles nur auf den von uns gewünschten Button auswirkt, sondern auf alle buttons auf der Webseite. Jetzt kommen die At-Rule @scope und der Selector :scope ins Spiel:

<button>
    <style>
        @scope {
            :scope {
                background: rebeccapurple;
                color: white;
                border: none;
                border-radius: 0.5rem;
                padding: 0.5rem 0.7rem;
            }
            :scope:hover {
                background: color-mix(in oklch, black 10%, rebeccapurple);
            }
        }
    </style>

    Click me
</button>

Scopes sind abgeschirmte Bereiche, wobei der Selector :scope immer für den obersten Knoten steht. Standardmäßig ist das das oberste Element im HTML-Dokument, das html-Element. Mit der At-Rule @scope { } machst du aber einen neuen Bereich auf. Wenn nichts weiter angegeben wird, und es wie in meinem Beispiel innerhalb des button-Elements in einem Stylesheet gesetzt wird, steht :scope dann für den Button. Das kann sehr hilfreich sein.