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 upsides, of course, are that the CSS that we create won't impact any of the other components.

The template for Blazor uses isolated CSS for Shared/MainLayout.razor and NavMenu.Razor. If you expand Shared/MainLayout.razor in the MyBlogWebAssebly.Client project, you'll see a file called MainLayout.razor.css.

You 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 in order for the compiler to pick it up.

This is a naming convention that 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...