CSS isolation

In .NET 5, Microsoft added something called isolated CSS. This is something that many other frameworks have as well. The idea is to write CSS specifically for one component. The upside, of course, is that the CSS that we create won’t impact any of the other components.

The template for Blazor uses isolated CSS for Components/Layout/MainLayout.razor and NavMenu.Razor. If we expand MainLayout.razor, we’ll see a file called MainLayout.razor.css. The tree is made possible thanks to using the same naming.

We can also use SASS here by adding a file called MainLayout.razor.scss. The important thing is that the file we add should generate a file called MainLayout.razor.css for the compiler to pick up.

This naming convention will make sure to rewrite CSS and the HTML output.

CSS has the following naming convention:

main {
    flex: 1;
}

It will be rewritten as follows:

main[b-bfl5h5967n] {
    flex: 1;
}

This means the elements...