CSS isolation will not be closed. How can we really isolate?

Question

How can CSS isolation be truly isolated? The CSS referenced below will be merged. Even if page1 is accessed, the style of Page2 will be loaded. If there are many pages. Many unnecessary things will be loaded, or how to turn off CSS isolation so that it does not generate so many useless names
https://github.com/dotnet/aspnetcore/issues/38348

Answer 1

You are missing some key concepts.

CSS isolation typically mean some implementation of modules. This is done by a CSS preprocessor adding unique tags to the CSS class names to make them unique. In asp.net core you define modules by placing them in the same directory as the razor view. The razor view module support preprocess both the razor page and the css file to add the names.

If you don’t want the module behavior, place the styles in the common CSS folder.

The second concept is bundling. Creating one bundle allows caching of the css file, and prevents loading the same CSS file twice. Say your razor page called 2 razor components that in turn called a common component that used a CSS module.

In order to create a bundle per page, a technique called tree shaking is done. This requires the bundler to understand the runtime tree of CSS references, so an individual tree of unique imports can be created per page. Currently asp.net razor views / pages do not support this.

If you to manually create unique page bundles, and use modules look at using less or sass for preprocessing the CSS files instead of the asp.net core bundler.

Note: this feature is common in JavaScript frameworks that use webpack. The css is imported as a webpack module, so webpack can build the complete dependency tree and do tree shaking. It also generate the JavaScript css load code to support the bundles.

Blazor being truly component based is more likely to make progress in tree shaking, but like the JavaScript frameworks must formalize the import of css modules.