Una cosa que siempre me molestó cuando trabajaba con Blazor fue lo fácil que era romper estilos accidentalmente entre componentes. Agregabas una clase en un componente y de repente algo más en una página completamente diferente parecía fuera de lugar. Resulta que Blazor tiene una solución integrada para esto: el aislamiento de CSS.

¿Qué es el aislamiento CSS?

El aislamiento de CSS le permite aplicar estilos a un componente específico. Blazor hace esto generando un atributo único para cada componente en el momento de la compilación y agregándolo a los selectores de CSS. Entonces tus estilos sólo se aplican al componente al que pertenecen.

No hay necesidad de nombrar BEM, no hay necesidad de locos trucos de especificidad. Simplemente CSS limpio y con alcance.

Cómo usarlo

Digamos que tienes un componente llamado 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 agregar estilos aislados, simplemente crea un archivo con el mismo nombre pero con la extensión .razor.css. En este 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;
}

¡Y eso es todo! Blazor lo seleccionará automáticamente y aplicará esos estilos únicamente al componente Card. Si tienes otra clase .card en otro lugar, no se verá afectada.

Cómo funciona bajo el capó

Cuando crea su proyecto, Blazor reescribe el HTML y CSS. Su componente obtiene un atributo único como b-3x8qz7k2f1, y los selectores CSS obtienen ese atributo agregado:

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

El paquete CSS generado se sirve como {ProjectName}.styles.css. Asegúrate de tener esto en tu index.html o _Host.cshtml:

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

Si te falta ese enlace, tus estilos aislados no aparecerán y pasarás 30 minutos preguntándote qué está pasando. Créame, he estado allí.

Apuntando a elementos secundarios

Una cosa a tener en cuenta es que, de forma predeterminada, el CSS aislado solo se aplica a los elementos del componente actual. Si desea aplicar estilo a elementos dentro de un componente secundario, necesita el combinador ::deep:

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

Esto le indica a Blazor que también aplique el estilo a elementos coincidentes dentro de componentes secundarios. Bastante útil cuando tienes un componente contenedor que necesita darle estilo a sus hijos.

Cuando usarlo

Ahora uso aislamiento CSS para casi todos los componentes. Mantiene las cosas limpias y predecibles. La única vez que no lo uso es para estilos verdaderamente globales como restablecimientos, tipografía o variables de tema; estos van en un archivo CSS compartido.

Espero que os haya gustado el post! No dudes en contactarme en cualquier red social en @emimontesdeoca.

Recursos

• Aislamiento CSS de ASP.NET Core Blazor