ASP.NET Core 多视图按需配置CSS方法及全站统一导航栏实现建议

• 抽取独立局部视图：将首页导航栏的HTML、交互逻辑单独拆分到Views/Shared/_NavBar.cshtml局部视图文件中，所有独立视图直接通过<partial name="_NavBar" />调用即可复用统一导航结构。后续调整导航栏内容、样式时只需要修改这一个文件，所有引用的页面会同步更新，不需要逐页改代码。
• 内置到公共布局页：如果项目要求所有视图强制使用和首页一致的导航栏，直接把导航栏代码迁移到默认的_Layout.cshtml布局模板中。所有套用该布局的视图不需要额外编写导航相关代码，页面渲染时会自动生成统一的导航栏，适配MVC、Razor Pages两种.NET Core项目结构。
• 视图组件封装：针对需要动态渲染的导航场景（比如根据用户登录状态显示/隐藏菜单项、拉取最新导航配置），可以把导航栏封装为独立的视图组件，在任意视图中通过@await Component.InvokeAsync("NavigationBar")调用，比普通局部视图的扩展性更强，不需要在各个页面重复写动态判断逻辑。

• 视图专属CSS块按需挂载：在现有全局site.css存放公共样式的基础上，给每个需要定制样式的视图单独创建对应CSS文件（比如用户中心视图对应css/views/user-center.css）。在布局页的<head>标签中预留可选的样式占位：

  @RenderSection("CustomStyles", required: false)
  

  需要加载专属样式的视图，在页面顶部写如下代码即可实现按需加载：

  @section CustomStyles {
      <link rel="stylesheet" href="~/css/views/user-center.css" asp-append-version="true" />
  }
  

  这种方式不会把定制样式全部堆在site.css里造成文件越来越臃肿，只有访问对应视图时才会加载专属样式，和公共样式完全隔离不冲突。
• 页面作用域类做样式隔离：如果不想拆分多个CSS文件，直接给每个视图的最外层DOM节点加唯一的页面标识类（比如首页加page-index，订单列表页加page-order-list），所有专属样式都以这个类作为选择器前缀写在site.css中，比如：

  /* 只有订单列表页的卡片才会应用这个样式，不会影响其他页面 */
  .page-order-list .card {
      border-radius: 4px;
  }
  

  这种方式的维护成本很低，找样式的时候直接按页面类名筛选就能定位到对应代码，不会出现不同页面的样式互相污染的问题。
• 业务区域独立样式目录：如果项目是按业务模块划分独立Area的，可以给每个Area创建独立的样式目录，通过Area专属的布局页统一加载对应模块的CSS，实现模块间的样式完全隔离，不需要在单个视图里手动引入样式文件。
• Scoped CSS能力适配：如果是使用.NET Core 3.0以上版本的Razor类库、Blazor项目，可以直接使用内置的范围CSS能力，每个视图配对的.cshtml.css文件中写的样式会自动附加唯一的属性选择器，不会全局污染，和现有site.css的使用习惯衔接成本极低。

内容的提问来源于stack exchange，提问作者CodeItNow