How does scope CSS work?
Вставка
- Опубліковано 2 чер 2024
- In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations.
Show Notes:
00:00 Welcome to Syntax!
01:00 Brought to you by Sentry.io.
01:33 Why scope your CSS?
03:21 Scott's hot take.
05:43 How does @scope CSS work?
07:31 Similar to a component-based workflow.
08:00 Not having to specify a selector for your scope.
09:52 Pseudo inline hover styles.
11:31 Donut scope.
13:01 "Inverted donut-hole scope"
14:50 Browser support + limitations.
All links available at syntax.fm/729
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript
I think the post react era will be mvc ish with most of the frontend being component based templating that uses pure scoped css and htmx-like partial updates. The reactivity libraries will actually be used as a regular library when you need it. It’s already going that way. These recent css and browser api improvements solve so much of what front end frameworks have been trying to do for most sites and apps
Maybe I missed it but is there some way to utilize this to stop inheritance into your components for a site you don't own/cant change the css of?
For instance say you have some "widgets" that others can embed on their site. The owners of that site can have all kinds of ugly css and often bleed into the widget. Is there some way in the widget to say "don't inherit anything above me"?
Similarly adding a new Micro Frontend to a bloated CSS legacy site. You can make the MFE look great on its own, but as soon as you go to render that MFE in the content area of the legacy site with all kind of un-scoped p, button, whatever css rules, the MFE inherits all that and visually blows up.
Is there some way to say at the top level of the MFE "dont inherit any css rules above me"
I like this, but what about html size when inline style tag is used a component library? Basically each instance has the same style tag, which doesn’t really make it useful. Also, instead of using tags as selectors, the better approach would be to use slots.
You would still use selectors for the cascade but for scoped styles specifically it allows you to keep them inside the component exclusively
So what does @scope do that nested CSS can't?
Nested css is just simplifying narrowing selectors. @scope allows you to prevent the styles from leaking outside of the scope.
@@syntaxfm I get how it works and its a nice step forwards, but given I work with components, mostly with svelte, keeping css properly contained isn't really an issue any more (for me). It's even quite pleasant, especially combined with Tailwind etc. For me most of the scenarios where it would have really helped don't really occur that often any more and when they do they're easier to either debug or code around.
Funny enough... about 3 seconds after sending my comment you guys pretty much answered my question... I should have deleted it 🙄
It does nothing that Svelte components can't do for you for sure. But if you use most other stacks it can give you that lovely scoping control.
@@syntaxfm Svelte does rock