Svelte Tutorial for Beginners - Style your Svelte component [1/3]

Опубликовано: 01 Январь 1970
на канале: lihautan
4,028
223

Let's add some styles to your Svelte component.

Styles are scoped in Svelte, meaning, all the selectors will only apply to the elements within the Svelte component.

This means
1) You don't have to worry adding a style will break the style of elements outside of this component
2) Svelte will warn you if your selector does not match any elements within this component

Also, @keyframes animations are scoped too!

Of course there's always a way to disable the scoped style behaviour if you choose not to scope your selector or @keyframes.

Introduction 00:00
How styles are scoped 00:54
Svelte warns for unused selectors 03:38
How scoped styles work 04:32
Scoped @keyframes 06:59
Disable scoped style behaviour 09:16

---

💻 REPL https://svelte.dev/repl/467770b8117d4...

🎧 Svelte Tutorial for Beginners    • Svelte Tutorial for Beginners  

📚 Related Resources
Svelte https://svelte.dev
Svelte REPL https://svelte.dev/repl
Svelte Tutorial https://svelte.dev/tutorial/styling

🥰 Support me https://www.buymeacoffee.com/lihautan

🔗 Want to learn more from me? Check out these links:

Twitter:   / lihautan  
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter

#svelte #sveltetutorial #sveltebeginner

Thanks for watching 🥰 -- with love, Li Hau