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.
Pages
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.
site.css
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.
Razor runtime compilation
⚠️ Css isolation may not working with Razor runtime compilation
Change environments
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
builder.WebHost.UseStaticWebAssets();
Steps to setup CSS Isolation on a Razor Page
We will begin with the main page Index at the root of the project.
- Right click on
Pages
folder - Add a new item, select text file
- Save the text file as
Index.cshtml.css
which will nest the new file underIndex.cshtml
as shown below. - Add styles into
Index.cshtml.css
- Open
Index.cshtml
and add<link rel="stylesheet" href="~/@(nameof(IsolationWebApp)).styles.css" />
. ReplaceIsolationWebApp
with the namespace of your project (easy to get from Program.cs) - In
Index.cshtml
add one or more elements that use the styles inIndex.cshtml.css
- 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.
Under the covers
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.
Caveats
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" />
Use
<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 nameof
.
See also
- ASP.NET Core Blazor CSS isolation
- CSS isolation for MVC Views and Razor Pages
- File nesting in Solution Explorer
Source code
See the following GitHub repository.
Summary
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.
Top comments (0)