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 Components/Shared/MainLayout.razor and NavMenu.Razor. If we expand MainLayout.razor in we'll see a file called MainLayout.razor.css.

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 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;
}

This means that the elements need to have an attribute called b-bfl5h5967n (in this case) in order...