styling.md

4. Styling in Svelte

• Understand the different ways to style your Svelte components and how to write maintainable, scalable CSS.

  4.A Scoped Styles

  • This is the default in Svelte, styles that are scoped to the current component, protecting them from changes outside of the component.
  • Article - CSS Scoping in Svelte and How to Work Around It - Jake Lundberg on Dev.To

  4.B Global Styles

  • Global styles can affect every part of your Svelte application. Using :global() selector, you can write global styles in Svelte.
  • Video - Global Styles - Joy of Code
  • Article - Writing Global Styles in Svelte - Nat Clark

  4.C Animating Svelte Components

  • Animations can add a lot of interactivity and joy to your Svelte applications. Learn how to animate Svelte components.
  • Video - Animations - Joy of code
  • Documentation - svelte/animate - Svelte Docs

  4.D CSS Best Practices

  • Learn how to write maintainable, scalable CSS. Svelte doesn't have any opinion on how you should write your CSS, but there are some best practices you can follow.
  • Article - CSS Best Practices to Follow and the Bad Habits to Avoid - 1stWebDesigner