Day 15 CSS isolation
CSS isolation 介绍
有时候会想对不同 Component 做个别样式设定，但如果把 class 都写在 wwwroot/css/site.css，或是针对某个元素改动样式，可能导致改一个就影响全部 Component，这种全域冲突是必须避免的，但应该怎麽做？
.NET 5 推出了 CSS isolation(CSS 隔离)，建立 Component 个别 css 档案，命名规范为 {Component name}.razor.css，档案会自动跟 {Component name}.razor 收纳在一起，且名称不分大小写。下图可以看到不论是 Blog.razor.css 还是 blog.razor.css 都会跟 Blog.razor 被视为同一组。
CSS isolation 会在建置时被处理，Blazor 会改写 CSS 选择器并产生一个 {Project name}.style.css 档案，可以在 wwwroot/index.html (Blazor WebAssembly) 或是 Pages/_Host.cshtml (Blazor Server) 的 <head> 标签内找到引用路径，由於这是建置时才会产生，所以在专案内是看不到的，我们打开浏览器的 Dev tool 并切换到 Sources 页签，就能看到这档案。
有人可能会发现为何 class 後面接着没看过的内容，例如 .page[b-mxoy4q7bj7] 或是 .main[b-mxoy4q7bj7]，这是 Blazor 用来辨识 CSS 选择器作用在哪个 Component 的区域识别码，格式为 b-10 位元数字及英文字串，每个 Component 的区域识别码都是独一无二的，可知这里的 .main 及 .page class 只作用於 [b-mxoy4q7bj7] 对应的 Component，注解写着 /* _content/BlazorServer/Shared/MainLayout.razor.rz.scp.css */，打开 Shared/MainLayout.razor.css，的确看到了 .main 及 .page class，rz.scp.css 附档名是用来辨识 CSS 选择器属於哪个 Component。
我们在 Blog.razor.css 加上一段针对 label 的样式修改，按下 ctrl + shift + B 建置专案，再看网页就能看到文字颜色改变了，BlazorServer.style.css 也能看到 Blog.razor.rz.scp.css 的样式区块多了一段 label[b-0ae5hiw99t]。
label {
color: darkcyan
}
套用样式到 Child Component
如果想对 Post Component 的 label 元素套用相同样式，又不想分别建立 razor.css 档案呢？Blazor 提供了方便的做法，只要在 CSS 选择器前面加上 ::deep 即可，我们在 Blog.razor.css 的 label 前面加上 ::deep，就能看到 Post 的 label 元素颜色都改变了，BlazorServer.style.css 的 class 也从 label[b-0ae5hiw99t] 变成了 [b-0ae5hiw99t] label。
不过要注意的是，必须有父子关系 ::deep 才能生效，Parent Compoent 的区域识别码仅作用於 <div> 标签，如果 Child Component 没有被 <div> 标签包住就不会生效。我们把 Blog.razor 中包住 Post Component 的 <div> 标签都注解，储存後再去网页看，发现 <label> 文字颜色都变回黑色了，但 BlazorServer.style.css 的 class 仍旧是 [b-0ae5hiw99t] label。
Ref: ASP.NET Core Blazor CSS isolation
<<: Day15 测试写起乃 - Devise login user
[NestJS 带你飞！] DAY30 - 实战演练 (中)
API 设计 前面有提到这次实作的系统共有两大资源，分别是：使用者 (user) 与 待办事项 (t...
【Day18】Git 版本控制 - 多人协作 Git Flow
Okay! 了解 fork 跟 pull request 的运作原理後，接下来我们来谈谈 Flow ...
Day10 - 套用 Tag Helper - 复杂型别 object
这篇开始使用 Tag Helper 来 Render 出需要的 Html 控制项 name，方便在 ...
不只懂 Vue 语法：试说明 Composition API 与 Options API 概念和语法的分别？
问题回答 Composition API 是以逻辑功能来分割程序码，像是写原生 JavaScript...
CSS背景属性与动态效果(DAY13)
这篇文章要介绍有关背景的CSS属性，包括背景颜色、图片、透明度、滚动，背景图片的重复，背景的位置以及...