In this article, we will know about a .NET6 feature that is CSS isolation of razor pages/views.
CSS Isolation:
CSS isolation means creating a CSS file like '.cshtml.css' for each razor page/view(.cshtml). CSS isolation helps to avoid dependencies on global styles that will be very hard to maintain and also avoid style conflicts among the nested content.
In this isolation process, the style defined in the '.csthm.css' file are scoped and they are applied to respective razor pages/views. For example, any styling that is added in 'index.cshtml.css' file will only apply to 'index.cshtml' page, they won't affect any other page in the application.
The .NET framework runtime will bundle all the isolated CSS files(*.csthml.css) in the single file that is '{your_application_name}.styles.css'. So this bundled CSS line will be added automatically at '{Pages/Views}/Shared/_Layout.cshml' by the framework.
The bundle CSS file({your_application}.styles.css) can maintain styles of each file without any conflict with the help of applying scope identifier like 'b-{10_character_string}'. So the scoped identifier 'b-{10_character_string}' will be unique for each file. so the on run time CSS and Html content look like below.
{Your_application}.styles.css:
h1[b-2jjtam6d07] { background: red; }{your_page}.cshtml:
<h1 b-2jjtam6d07>Hello </h1>
Create A .NET6 MVC Application:
Let's create a .Net6 MVC application to accomplish our demo. We can use either Visual Studio 2022 or Visual Studio Code (using .NET CLI commands) to create any .Net6 application. For this demo, I'm using the 'Visual Studio Code'(Using .Net CLI commands) editor.
CLI command For Minimal API Project
dotnet new mvc -o Your_Project_Name
dotnet new mvc -o Your_Project_Name
Implement CSS Isolation:
Let's create a CSS file like 'Index.csthml.css' for the view 'Index.cshtml'. So all styles that we are going to add in 'Index.csthml.css' file will only affect our view 'Index.cshtml'.
Index.cshtml.css:(CSS File)
p{ background-color: yellow; }
- Here every paragraph tag in 'Index.cshtml' gets styles applied from the 'Index.cshtml.css'
Customizing Identifier(b-{10_Character_string}) Value:
We know CSS isolation depends on scope identified value like 'b-{10_Character_string}' which can be customized with our own string. So to customize the scope identifier we need to add configuration to the '.csproj' file.
Your_ProjectName.csproj:
<ItemGroup> <None Update="Views/Home/Index.cshtml.css" CssScope="my-cust" /> </ItemGroup>
- Here in the project file, we will add an 'ItemGroup'. Here we have to specify the fully qualified CSS file name and then we have to specify our scope identifier name to the 'CssScope' key.
By customizing identifier value we can achieve CSS inheritance by grouping the CSS file under common custom identifier value. So let's create partial view '_Test.csthml' and '_Test.cshtml.css', now let render our partial views into our 'Index.html'. Now if we group 'Index.cshtml.css', '_Test.cshtml.css' with a common identifier then the styles in the parent CSS file can be applied to the partial view content as well.
Let's add a partial view like '_Test.cshtml'.
Views/Shared/Partials/_Test.cshtml:
<h3>I'm Partial View</h3>Now let's create the 'Views/Shared/Partials/_Test.cshtml.css' file, for now, let's leave this file empty.
Now in the 'Index.cshtml.css' file add some 'h3' tag styling so that on-page rendering will also be applied to all the 'h3' tags in our partial view(_Test.cshtml)
Index.cshtml.css:
p{ background-color: yellow; } h3{ background-color: green; }
Render the partial view '_Test.cshtml' into the 'Index.cshtml' page.
Index.cshtml:
<div> @await Html.PartialAsync("~/Views/Shared/Partials/_Test.cshtml") </div>
Finally, we want to create a common scope identifier value for files 'Index.html.css', '_Test.cshtml'. So let's update our project file as below
your_app_name.csproj:
<ItemGroup> <None Update="Views/Home/Index.cshtml.css" CssScope="my-app" /> <None Update="Views/Shared/Partials/_Test.cshtml.css" CssScope="my-app" /> </ItemGroup>
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on CSS isolation of razor pages/views. I love to have your feedback, suggestions, and better techniques in the comment section below.
If _Test.cshtml.css wasn't empty, the built projet would not show the _Test's elements with it's own CSS content.
ReplyDeleteHi
DeleteSo when ever styles not applying, then we have clean bin folder and rebuild again project then we can see our style changes