CSS Isolation topic addresses Razor components, but what about Pages?

[Paul-Dempsey]

CSS Isolation topic addresses Razor Components, but what about Pages?

I have a page with unique styles that I'd like to have separate from the rest of the app. Can I use this mechanism for pages in addition to components?

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 2703a48e-8b35-53fc-ac36-cfb395833077
• Version Independent ID: 39d464d9-aca6-34fa-7e52-5fde2e393ba7
• Content: ASP.NET Core Blazor CSS isolation
• Content Source: aspnetcore/blazor/components/css-isolation.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @daveabrock
• Microsoft Alias: riande

[guardrex]

Hello @Paul-Dempsey ... Product feature requests should go to the PU ("product unit"), as we just handle docs here. Open an issue to discuss it with them at ...

https://github.com/dotnet/aspnetcore/issues

btw -- The answer to your question is 'no'. We don't call out that type of delta explicitly ... calling such things out would fill the content with things that the Blazor framework can't do. If you don't see something in the Razor Pages area of the docs, it doesn't provide the feature.

[Paul-Dempsey]

At the very least, the page can document that this is only for components, and not pages. That would be satisfactory. From: Luke Latham ***@***.***> Sent: Thursday, April 29, 2021 9:35 AM To: dotnet/AspNetCore.Docs ***@***.***> Cc: Paul Dempsey ***@***.***>; Mention ***@***.***> Subject: Re: [dotnet/AspNetCore.Docs] CSS Isolation topic addresses Razor components, but what about Pages? (#22165) Hello @Paul-Dempsey<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FPaul-Dempsey&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C6323d1b071154d28d03808d90b2cae64%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553108797867401%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=iIj8BmHhco8JTjlaKHVCHZTpV0JF9PCMvi5B%2FJVlQ2c%3D&reserved=0> ... Product feature requests should go to the PU ("product unit"), as we just handle docs here. Open an issue to discuss it with them at ... https://github.com/dotnet/aspnetcore/issues<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdotnet%2Faspnetcore%2Fissues&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C6323d1b071154d28d03808d90b2cae64%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553108797867401%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=4W8MBOaEEXr1FL90gxs%2B0yohLgICczeb9N5PlT0GyV4%3D&reserved=0> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdotnet%2FAspNetCore.Docs%2Fissues%2F22165%23issuecomment-829402039&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C6323d1b071154d28d03808d90b2cae64%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553108797877394%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=yoO89UqSWi2fHRUVhxCh%2BKVIlgA4s7VENlZSGGM4JUQ%3D&reserved=0>, or unsubscribe<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAF7S4CSAVYEFQEQBRWRTCN3TLGDB5ANCNFSM432HDLZA&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C6323d1b071154d28d03808d90b2cae64%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553108797887388%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=KmA5PaoTcKoftBIql0lxdHKHWA%2BAwITf%2Bf1AbjtdHm4%3D&reserved=0>.

[guardrex]

It does indirectly, which is the standard docs organizational practice ... e.g., emphasis added ...

• Title: "ASP.NET Core Blazor CSS isolation"
• Location: It's in the Blazor node of the ToC.
• Opening line: "CSS isolation simplifies an app's CSS footprint by preventing dependencies on global styles and helps to avoid styling conflicts among components and libraries."
• Various examples: "To define component-specific styles ...", "Blazor rewrites CSS selectors to match markup rendered by the component.", etc.

... and it doesn't cross-link to any corollary in RP/MVC because such a thing doesn't exist to cross-link.

We don't want to go down this road of covering things that other frameworks do/don't do. This is the Blazor node, and we keep the content fairly focused on Blazor. The only overlap that we keep IIRC is for scaffolding and Razor syntax, where there is so much overlap that we keep the content in a combined topic. Those topics do need to say 'this is for RC' and 'this is for RP/views'. Where Blazor Server uses ordinary ASP.NET Core bits, we try to not cover the features at all in the Blazor node but defer to the main ASP.NET Core doc set for coverage.

Like I said, there's a Razor Pages ToC node. If you don't see a feature there ... which is revealed very quickly by searching the docs ... it isn't a Razor Pages scenario. The entire doc set is based on this principle.

Thanks again tho for the feedback. At least for the time being, I'd prefer to stick with not drifting into "this is only for Razor components" lingo here ... such language would have to go all over the place in this node.

[Paul-Dempsey]

I am talking about Blazor Pages. (My app is server-side Blazor). There isn’t even a node for Pages under Blazor, which seems like an omission. Perhaps I’m just confused and in fact Blazor pages are 100% identical to Razor pages, but that isn’t obvious or explicit anywhere. I haven’t really noticed a ton of distinctions between components/vs pages in most Blazor functionality. Anyway, it looks like a simple inline <style> tag, or a stylesheet link appears to work fine. This could be handled in one or two sentences. Too bad that it would probably be very simple to have the implicit behavior by convention similar to components. From: Luke Latham ***@***.***> Sent: Thursday, April 29, 2021 10:26 AM To: dotnet/AspNetCore.Docs ***@***.***> Cc: Paul Dempsey ***@***.***>; Mention ***@***.***> Subject: Re: [dotnet/AspNetCore.Docs] CSS Isolation topic addresses Razor components, but what about Pages? (#22165) It does indirectly, which is the standard docs organizational practice ... e.g., emphasis added ... * Title: "ASP.NET Core Blazor CSS isolation" * Location: It's in the Blazor node of the ToC. * Opening line: "CSS isolation simplifies an app's CSS footprint by preventing dependencies on global styles and helps to avoid styling conflicts among components and libraries." * Various examples: "To define component-specific styles ...", "Blazor rewrites CSS selectors to match markup rendered by the component.", etc. ... and it doesn't cross-link to any corollary in RP/MVC because such a thing doesn't exist to cross-link. We don't want to go down this road of covering things that other frameworks do/don't do. This is the Blazor node, and we keep the content fairly focused on Blazor. The only overlap that we keep IIRC is for scaffolding and Razor syntax, where there is so much overlap that we keep the content in a combined topic. Those topics do need to say 'this is for RC' and 'this is for RP/views'. Where Blazor Server uses ordinary ASP.NET Core bits, we try to not cover the features at all in the Blazor node but defer to the main ASP.NET Core doc set for coverage. Like I said, there's a Razor Pages ToC node. If you don't see a feature there ... which is revealed very quickly by searching the docs ... it isn't a Razor Pages scenario. The entire doc set is based on this principle. Thanks again tho for the feedback. At least for the time being, I'd prefer to stick with not drifting into "this is only for Razor components" lingo here ... such language would have to go all over the place in this node. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdotnet%2FAspNetCore.Docs%2Fissues%2F22165%23issuecomment-829449404&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C18a6c02df3fc4b275e5508d90b33cb08%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553139342314934%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=cnArobjfOKOBVLcYiRUUpLaCwbemDzQg%2Fyt1YjFJ1po%3D&reserved=0>, or unsubscribe<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAF7S4CRSV22KUNTM7DRTONTTLGJAZANCNFSM432HDLZA&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C18a6c02df3fc4b275e5508d90b33cb08%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553139342314934%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=Minr4ydVHDdXd78Aik2iVy72r%2FLSu4lX0ue0xcX5j4E%3D&reserved=0>.

[guardrex]

"Blazor Pages" ❓

That's not a thing. You just made that up. - David Fowler, 2015

😄 ... seriously tho ... I think I understand that you mean a Blazor Server app can host Razor Pages framework pages (or MVC views for that matter). The framework/technology descriptions in their introductory docs of their respective nodes try to cover it, and we'll keep working on those docs as we go. They get revised from time-to-time, and I'll go over them again on these points on the next cycle of updates.

Razor Pages is a different framework from Blazor (Razor components). The Razor Pages node is here ...

https://docs.microsoft.com/aspnet/core/razor-pages/

... and common content follows that node in the Web apps area (same folder level as the other types of web apps), including in the Advanced node.

WRT ...

I haven’t really noticed a ton of distinctions between components/vs pages in most Blazor functionality.

There are many distinctions between Razor components and Razor pages (and MVC views) outside of the shared Razor syntax. [There are no distinctions for Razor Pages (pages) and MVC controllers/views tho.] It's true that we don't have a kind of 'compare and contrast' presentation of the differences between components and pages/views, but the basics of components are covered in the Components node starting with ...

https://docs.microsoft.com/aspnet/core/blazor/components/

... and going right down to class libs ... which btw was one other area of decent overlap. We call out the Blazor-specific bits and use Blazor examples in the Blazor RCL topic to distinguish things from the doc in the main content at ...

https://docs.microsoft.com/aspnet/core/razor-pages/ui-class

In any case, this feature ... Blazor CSS isolation ... is a Blazor-only/Razor components-only scenario. You could pitch it to the PU as a possible cool thing for Razor Pages (pages)/MVC views, but that's an issue for the PU repo. Here, I'd like to avoid "this feature is only for Razor components" ... there are many places where such a remark would go. The reverse would be true as well: We don't want to litter the RP/MVC docs with "this feature is only for Razor Pages/MVC." That also would also need to appear all over the place. We focus content by ToC node, and I think we'll probably end up (mostly) sticking with our current approach. If devs do get confused and I see several issues coming in on something like this ... i.e., a point of confusion over pages/views and components ... then yeah ... I'd do something in the docs about it. I'll keep an 👂 open as we go forward.

btw - I think that management should consider a 'compare and contrast' type of topic. I've cross-linked this issue to my UE ("user experience") tracking issue for discussion at #19286. I'll chat with Dan and Artak about it later. We're so busy with UE passes (overhauls of topics) ... and soon 6.0 work ... that it won't be addressed until the end of this year. I'll make sure to raise it with them.

btw 😄 ... We're aware of the overload in what to call a hybrid app. It's really a hybrid ...

services.AddRazorPages();
services.AddServerSideBlazor();

• Is it an Razor Pages/MVC app with Razor components?
• Is it an Blazor Server app with Razor Pages/MVC?

Such apps use both frameworks, but they remain distinct and process requests separately with a little bit of gymnastics to move context data across the barrier.

[Paul-Dempsey]

There are quite a few Blazor-specific things I need to do in my Pages ***@***.***, for example), and I would look down the Blazor tree for Blazor things. Well, you’ve clarified a few things for me that aren’t apparent when casually dipping into the docs. They make sense from an insider’s point of view, but can make things harder for those that aren’t already clear on the distinctions between all these moving parts. Thanks for the detailed engagement 😉. From: Luke Latham ***@***.***> Sent: Thursday, April 29, 2021 11:56 AM To: dotnet/AspNetCore.Docs ***@***.***> Cc: Paul Dempsey ***@***.***>; Mention ***@***.***> Subject: Re: [dotnet/AspNetCore.Docs] CSS Isolation topic addresses Razor components, but what about Pages? (#22165) "Blazor Pages" ❓ That's not a thing. You just made that up. - David Fowler, 2015 😄 ... seriously tho ... I think I understand that you mean a Blazor Server app can host Razor Pages framework pages (or MVC views for that matter). The framework/technology descriptions in their introductory docs of their respective nodes try to cover it, and we'll keep working on those docs as we go. They get revised from time-to-time, and I'll go over them again on these points on the next cycle of updates. Razor Pages is a different framework from Blazor (Razor components). The Razor Pages node is here ... https://docs.microsoft.com/aspnet/core/razor-pages/<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdocs.microsoft.com%2Faspnet%2Fcore%2Frazor-pages%2F&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C4232aa477fea4968d7a108d90b407f51%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553193910347998%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=f%2BEsk7Dx6ohUECmRyvP8J6p9a8G1GpfFnhv%2B9zJXqQ0%3D&reserved=0> ... and common content follows that node in the Web apps area (same folder level as the other types of web apps), including in the Advanced node. WRT ... I haven’t really noticed a ton of distinctions between components/vs pages in most Blazor functionality. There are many distinctions between Razor components and Razor pages (and MVC views) outside of the shared Razor syntax. [There are no distinctions for Razor Pages (pages) and MVC controllers/views tho.] It's true that we don't have a kind of 'compare and contrast' presentation of the differences between components and pages/views, but the basics of components are covered in the Components node starting with ... https://docs.microsoft.com/aspnet/core/blazor/components/<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdocs.microsoft.com%2Faspnet%2Fcore%2Fblazor%2Fcomponents%2F&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C4232aa477fea4968d7a108d90b407f51%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553193910357995%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=3OXsKZ0hBGq6iFotW6YlJ65m4tBSRC%2Fae8CLGfv7L9w%3D&reserved=0> ... and going right down to class libs ... which btw was one other area of decent overlap. We call out the Blazor-specific bits and use Blazor examples in the Blazor RCL topic to distinguish things from the doc in the main content at ... https://docs.microsoft.com/aspnet/core/razor-pages/ui-class<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdocs.microsoft.com%2Faspnet%2Fcore%2Frazor-pages%2Fui-class&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C4232aa477fea4968d7a108d90b407f51%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553193910357995%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=WYLp%2F2DgpN2Yix%2FWIiE50WIocyLKfaVdkcptBjijwqc%3D&reserved=0> In any case, this feature ... Blazor CSS isolation ... is a Blazor-only/Razor components-only scenario. You could pitch it to the PU as a possible cool thing for Razor Pages (pages)/MVC views, but that's an issue for the PU repo. Here, I'd like to avoid "this feature is only for Razor components" ... there are many places where such a remark would go. The reverse would be true as well: We don't want to litter the RP/MVC docs with "this feature is only for Razor Pages/MVC." That also would also need to appear all over the place. We focus content by ToC node, and I think we'll probably end up (mostly) sticking with our current approach. If devs do get confused and I see several issues coming in on something like this ... i.e., a point of confusion over pages/views and components ... then yeah ... I'd do something in the docs about it. I'll keep an 👂 open as we go forward. btw - I think that management should consider a 'compare and contrast' type of topic. I've cross-linked this issue to my UE ("user experience") tracking issue for discussion at #19286<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdotnet%2FAspNetCore.Docs%2Fissues%2F19286&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C4232aa477fea4968d7a108d90b407f51%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553193910367989%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=IETSbPmy%2Bo%2FjgbWk9xSJwTH0dvdnaPSC%2BrZdpeoDbuU%3D&reserved=0>. I'll chat with Dan and Artak about it later. We're so busy with UE passes (overhauls of topics) ... and soon 6.0 work ... that it won't be addressed until the end of this year. I'll make sure to raise it with them. btw 😄 ... We're aware of the overload in what to call a hybrid app. It's really a hybrid ... services.AddRazorPages(); services.AddServerSideBlazor(); * Is it an Razor Pages/MVC app with Razor components? * Is it an Blazor Server app with Razor Pages/MVC? Such apps use both frameworks, but they remain distinct and process requests separately with a little bit of gymnastics to move context data across the barrier. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fdotnet%2FAspNetCore.Docs%2Fissues%2F22165%23issuecomment-829507494&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C4232aa477fea4968d7a108d90b407f51%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553193910367989%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=x5rGClkfs0AAu7b92yIYtYUn9NV9y11Beixcc%2BdQxz8%3D&reserved=0>, or unsubscribe<https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAF7S4CXLH6XPYAEWMQFR3QTTLGTVZANCNFSM432HDLZA&data=04%7C01%7CPaul.Dempsey%40microsoft.com%7C4232aa477fea4968d7a108d90b407f51%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C637553193910377983%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=4Y7XpFJE4llhtwOxtn16qsBbnvtu%2FHjxs%2F0d782icA8%3D&reserved=0>.

[guardrex]

Sure thing ... I'll review our discussion on the next major cycle of updates.

casually dipping into the docs

That seems like a challenging approach. It might be a good idea to have some early coverage that indicates the most important Blazor doc nodes and topics as a kind of suggested reading list for RP/MVC devs. I'll talk to Dan and Artak about that idea.

[guardrex]

One more thing @Paul-Dempsey. I was just reviewing our intro content on these concerns. We do have a section pertaining to these concepts at ...

https://docs.microsoft.com/aspnet/core/blazor/hosting-models#comparison-to-server-rendered-ui

... and in the next few sections, which further describe particular aspects of Blazor Server apps. Take a look and see if that clears some things up.

Those sections could use another look later for improvements. I've made a note on the tracking issue so that it doesn't get lost.

Thanks again for chatting with me about it.