Eine Sache, die mich bei der Arbeit mit Blazor immer gestört hat, war, wie leicht es war, versehentlich Stile über Komponenten hinweg aufzuteilen. Sie fügten eine Klasse in einer Komponente hinzu und plötzlich sah etwas anderes auf einer völlig anderen Seite aus. Es stellte sich heraus, dass Blazor hierfür eine integrierte Lösung hat: CSS-Isolation.

Was ist CSS-Isolation?

Mithilfe der CSS-Isolation können Sie Stile auf eine bestimmte Komponente beschränken. Blazor erreicht dies, indem es zum Zeitpunkt der Erstellung ein eindeutiges Attribut für jede Komponente generiert und es an die CSS-Selektoren anhängt. Ihre Stile gelten also nur für die Komponente, zu der sie gehören.

Keine Notwendigkeit für BEM-Namen, keine Notwendigkeit für verrückte Spezifitäts-Hacks. Nur sauberes CSS mit Gültigkeitsbereich.

Wie man es benutzt

Nehmen wir an, Sie haben eine Komponente namens Card.razor:

<div class="card">
    <h3 class="card-title">@Title</h3>
    <p class="card-body">@ChildContent</p>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

Um isolierte Stile hinzuzufügen, erstellen Sie einfach eine Datei mit demselben Namen, aber mit der Erweiterung .razor.css. In diesem Fall: Card.razor.css.

.card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--color-bg-secondary);
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-body {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

Und das ist es! Blazor übernimmt es automatisch und beschränkt diese Stile nur auf die Komponente Card. Wenn Sie irgendwo anders eine andere .card-Klasse haben, ist diese nicht betroffen.

Wie es unter der Haube funktioniert

Wenn Sie Ihr Projekt erstellen, schreibt Blazor HTML und CSS neu. Ihre Komponente erhält ein eindeutiges Attribut wie b-3x8qz7k2f1 und die CSS-Selektoren erhalten dieses Attribut angehängt:

.card[b-3x8qz7k2f1] {
    border: 1px solid var(--color-border);
    /* ... */
}

Das generierte CSS-Bundle wird als {ProjectName}.styles.css bereitgestellt. Stellen Sie sicher, dass Sie dies in Ihrem index.html oder _Host.cshtml haben:

<link href="YourApp.styles.css" rel="stylesheet" />

Wenn Sie diesen Link verpassen, werden Ihre isolierten Stile nicht angezeigt und Sie werden sich 30 Minuten lang fragen, was los ist. Vertrauen Sie mir, ich war dort.

Targeting untergeordneter Elemente

Beachten Sie, dass isoliertes CSS standardmäßig nur auf die Elemente der aktuellen Komponente angewendet wird. Wenn Sie Elemente innerhalb einer untergeordneten Komponente formatieren möchten, benötigen Sie den Kombinator ::deep:

::deep .child-element {
    color: red;
}

Dadurch wird Blazor angewiesen, den Stil auch auf übereinstimmende Elemente innerhalb untergeordneter Komponenten anzuwenden. Ziemlich praktisch, wenn Sie eine Wrapper-Komponente haben, die ihre untergeordneten Komponenten formatieren muss.

Wann man es verwenden sollte

Ich verwende mittlerweile CSS-Isolation für so ziemlich jede Komponente. Es sorgt dafür, dass die Dinge sauber und vorhersehbar bleiben. Das einzige Mal, dass ich es nicht verwende, sind wirklich globale Stile wie Zurücksetzen, Typografie oder Designvariablen – diese werden in einer gemeinsam genutzten CSS-Datei gespeichert.

Ich hoffe, Ihnen hat der Beitrag gefallen! Sie können mich gerne in den sozialen Medien unter @emimontesdeoca kontaktieren.

Ressourcen

• ASP.NET Core Blazor CSS-Isolation