0

I'm new to asp.net and have few questions.

I have a module with Index.cshtml along with _Partial1.cshtml and _Partial2.cshtml in the same folder.

  1. Should I create individual external CSS file for each HTML file or use common CSS file per module?
  2. If former, then does CSS file name of each partial also start with _?

Thanks in advance.

Dhruvil21_04
  • 1,804
  • 2
  • 17
  • 31

1 Answers1

2

You can create individual CSS file for each HTML file and you can also write all css code in Index.cshtml.

There is a new feature called CSS Isolation in .Net6. CSS isolation simplifies an app’s CSS footprint by preventing dependencies on global styles and helps to avoid styling conflicts among components and libraries. CSS Isolation is enabled by default for ASP.NET Core 6.0 Projects.

So if you wanna create individual CSS file for each HTML file, You can use CSS isolation. Just create a css file called <ViewName>.cshtml.css, And it should be in the same folder as the view.

In your project, You can create CSS file called _Partial1.cshtml.css and _Partial2.cshtml.css, Then The project structure will become：

enter image description here

If you are using .Net5, You can try this code:

<link rel="stylesheet" href="~/css/P1.css">
<link rel="stylesheet" href="~/css/P2.css">


//......other code........
<div id="Pattial1">
    @await Html.PartialAsync("/Views/Shared/_Partial1.cshtml")
</div>

<div id="Partial2">
    @await Html.PartialAsync("/Views/Shared/_Partial2.cshtml")
</div>

CSS file

#Pattial1 h1{
    color : red
}

//......
Xinran Shen
  • 8,416
  • 2
  • 3
  • 12