Une chose qui m’a toujours dérangé lorsque je travaillais avec Blazor était la facilité avec laquelle il était possible de casser accidentellement des styles entre des composants. Vous ajouteriez une classe dans un composant et tout à coup, quelque chose d’autre sur une page complètement différente semblerait différent. Il s’avère que Blazor a une solution intégrée pour cela : l’isolation CSS.

Qu’est-ce que l’isolation CSS ?

L’isolation CSS vous permet d’étendre les styles à un composant spécifique. Blazor fait cela en générant un attribut unique pour chaque composant au moment de la construction et en l’ajoutant aux sélecteurs CSS. Vos styles s’appliquent donc uniquement au composant auquel ils appartiennent.

Pas besoin de nommage BEM, pas besoin de hacks de spécificité fous. Juste du CSS propre et étendu.

Comment l’utiliser

Disons que vous disposez d’un composant appelé 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; }
}

Pour ajouter des styles isolés, il vous suffit de créer un fichier du même nom mais avec l’extension .razor.css. Dans ce cas : 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;
}

Et c’est tout ! Blazor le récupérera automatiquement et étendra ces styles au composant Card uniquement. Si vous avez une autre classe .card ailleurs, elle ne sera pas affectée.

Comment ça marche sous le capot

Lorsque vous créez votre projet, Blazor réécrit le HTML et le CSS. Votre composant obtient un attribut unique tel que b-3x8qz7k2f1, et les sélecteurs CSS obtiennent cet attribut ajouté :

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

Le bundle CSS généré est servi en tant que {ProjectName}.styles.css. Assurez-vous d’avoir ceci dans votre index.html ou _Host.cshtml :

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

Si vous manquez ce lien, vos styles isolés n’apparaîtront pas et vous passerez 30 minutes à vous demander ce qui se passe. Croyez-moi, j’y suis allé.

Ciblage des éléments enfants

Une chose à garder à l’esprit est que par défaut, le CSS isolé ne s’applique qu’aux éléments du composant actuel. Si vous souhaitez styliser des éléments à l’intérieur d’un composant enfant, vous avez besoin du combinateur ::deep :

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

Cela indique à Blazor d’appliquer également le style aux éléments correspondants dans les composants enfants. Assez pratique lorsque vous avez un composant wrapper qui doit styliser ses enfants.

Quand l’utiliser

J’utilise désormais l’isolation CSS pour presque tous les composants. Cela garde les choses propres et prévisibles. La seule fois où je ne l’utilise pas, c’est pour des styles véritablement globaux comme les réinitialisations, la typographie ou les variables de thème – ceux-ci sont stockés dans un fichier CSS partagé.

J’espère que vous avez aimé le message ! N’hésitez pas à me contacter sur tous les réseaux sociaux à @emimontesdeoca.

Ressources

• Isolement CSS ASP.NET Core Blazor