Why Global styles in Svelte? - Purpose & Use Cases

The Big Idea

What if you could change your entire app's look by editing just one file?

The Scenario

Imagine you have a website with many pages and components, and you want all buttons to look the same everywhere. You try to add the same CSS rules to each component manually.

The Problem

Manually repeating styles in every component is tiring, easy to forget, and causes inconsistent looks. If you want to change a color or font, you must update every place, which wastes time and causes mistakes.

The Solution

Global styles let you write CSS once and apply it everywhere automatically. This way, all parts of your app share the same look without repeating code, making updates simple and consistent.

Before vs After

✗ Before

button { color: blue; font-size: 1rem; } /* repeated in every component */

✓ After

:global(button) { color: blue; font-size: 1rem; } /* one place for all */

What It Enables

Global styles make your app look unified and let you change the whole design quickly by editing just one style sheet.

Real Life Example

Think of a company website where the brand color changes. With global styles, you update the color once, and all buttons, links, and headers update instantly everywhere.

Key Takeaways

Manual style repetition is slow and error-prone.

Global styles apply shared CSS rules across all components.

They simplify design updates and keep your app consistent.