Learn how to prevent dependencies on global styles and helps to avoid styling conflicts among components and libraries of styles in an application where most styles reside under
wwwroot\css\site.css by using CSS isolation scopes CSS to Razor components, which can simplify CSS and avoid collisions with other components or libraries.
There are three pages, Index, About and Articles\Index were each page will have the same content but by using CSS Isolation each page styles will be independent of the other pages.
This is where we define
global styles for a Razor pages web application. There is one style for
H6 which is overridden in each of the pages mentioned above.
⚠️ Css isolation may not working with Razor runtime compilation
Several times isolation failed when changing from development to staging environment and worked once back in development. When not working in staging the isolation style sheet file mirrored the page, no CSS.
What appears to be the fix is adding the following to Program.cs
We will begin with the main page Index at the root of the project.
- Right click on
- Add a new item, select text file
- Save the text file as
Index.cshtml.csswhich will nest the new file under
Index.cshtmlas shown below.
- Add styles into
<link rel="stylesheet" href="~/@(nameof(IsolationWebApp)).styles.css" />. Replace
IsolationWebAppwith the namespace of your project (easy to get from Program.cs)
Index.cshtmladd one or more elements that use the styles in
- Run the application
Next repeat the above steps for other pages, in the project presented About and Articles\Index have the exact sample styles as Index but have enough changes to styles so that when running the app the person running the app can see that the styles are isolated to their respective page.
While running the project, open the browser web tools, travese to, in this case IsolationWebApp.styles.css and note there are sections for each page and note the [b...] identifiers which are injected into the respective page.
In after change a style, running the project the changes are not reflected open the browser's development tools then back in the browser empty the cache and perform a hard reload.
When adding a link for the style sheet do not use
<link rel="stylesheet" href="~/IsolationWebApp.styles.css" />
<link rel="stylesheet" href="~/@(nameof(IsolationWebApp)).styles.css" />
This is because in the first example if the namespace changes the style sheet will not be located while in the second example it will be as when renaming the namespace in Visual Studio it will be in
nameof(IsolationWebApp) when using
- ASP.NET Core Blazor CSS isolation
- CSS isolation for MVC Views and Razor Pages
- File nesting in Solution Explorer
See the following GitHub repository.
Visual Studio makes it easy to prevent dependencies on global styles and helps to avoid styling conflicts between other pages and components by following the instructions provided.