Uma coisa que sempre me incomodou ao trabalhar com o Blazor foi como era fácil quebrar acidentalmente estilos entre componentes. Você adicionava uma classe em um componente e, de repente, outra coisa em uma página completamente diferente parecia desativada. Acontece que o Blazor tem uma solução integrada para isso: isolamento CSS.

O que é isolamento CSS?

O isolamento CSS permite definir estilos para um componente específico. O Blazor faz isso gerando um atributo exclusivo para cada componente no momento da construção e anexando-o aos seletores CSS. Portanto, seus estilos se aplicam apenas ao componente ao qual pertencem.

Não há necessidade de nomenclatura BEM, nem de hacks malucos de especificidade. Apenas CSS limpo e com escopo definido.

#Como usar

Digamos que você tenha um componente chamado 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; }
}

Para adicionar estilos isolados, basta criar um arquivo com o mesmo nome, mas com extensão .razor.css. Neste caso: 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;
}

E é isso! O Blazor irá selecioná-lo automaticamente e definir o escopo desses estilos apenas para o componente Card. Se você tiver outra classe .card em outro lugar, ela não será afetada.

Como funciona nos bastidores

Quando você cria seu projeto, o Blazor reescreve o HTML e o CSS. Seu componente recebe um atributo exclusivo como b-3x8qz7k2f1, e os seletores CSS recebem esse atributo anexado:

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

O pacote CSS gerado é servido como {ProjectName}.styles.css. Certifique-se de ter isso em seu index.html ou _Host.cshtml:

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

Se você perder esse link, seus estilos isolados não aparecerão e você passará 30 minutos se perguntando o que está acontecendo. Confie em mim, eu estive lá.

Visando elementos filhos

Uma coisa a ter em mente é que, por padrão, o CSS isolado se aplica apenas aos elementos do componente atual. Se você deseja estilizar elementos dentro de um componente filho, você precisa do combinador ::deep:

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

Isso diz ao Blazor para aplicar o estilo aos elementos correspondentes também nos componentes filhos. Muito útil quando você tem um componente wrapper que precisa estilizar seus filhos.

Quando usar

Eu uso isolamento CSS para praticamente todos os componentes agora. Isso mantém as coisas limpas e previsíveis. A única vez que não uso isso é para estilos verdadeiramente globais, como redefinições, tipografia ou variáveis ​​de tema - elas vão em um arquivo CSS compartilhado.

Espero que você tenha gostado da postagem! Sinta-se à vontade para entrar em contato comigo em qualquer mídia social em @emimontesdeoca.

Recursos

• Isolamento de CSS do ASP.NET Core Blazor