sveltejs
diff --git a/‎documentation/docs/04-styling/01-scoped-styles.md‎
Lines changed: 42 additions & 0 deletions b/‎documentation/docs/04-styling/01-scoped-styles.md‎
Lines changed: 42 additions & 0 deletions
diff --git a/‎documentation/docs/04-styling/01-styles-and-classes.md‎
Lines changed: 0 additions & 235 deletions b/‎documentation/docs/04-styling/01-styles-and-classes.md‎
Lines changed: 0 additions & 235 deletions
diff --git a/‎documentation/docs/04-styling/02-global-styles.md‎
Lines changed: 65 additions & 0 deletions b/‎documentation/docs/04-styling/02-global-styles.md‎
Lines changed: 65 additions & 0 deletions
@@ -0,0 +1,42 @@
+---
+title: Scoped styles
+---
+
+Svelte components can include a `<style>` element containing CSS that belongs to the component. This CSS is _scoped_ by default, meaning that styles will not apply to any elements on the page outside the component in question.
+
+This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).
+
+```svelte
+<style>
+	p {
+		/* this will only affect <p> elements in this component */
+		color: burlywood;
+	}
+</style>
+```
+
+## Specificity
+
+Each scoped selector receives a [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) increase of 0-1-0, as a result of the scoping class (e.g. `.svelte-123xyz`) being added to the selector. This means that (for example) a `p` selector defined in a component will take precedence over a `p` selector defined in a global stylesheet, even if the global stylesheet is loaded later.
+
+In some cases, the scoping class must be added to a selector multiple times, but after the first occurrence it is added with `:where(.svelte-xyz123)` in order to not increase specificity further.
+
+## Scoped keyframes
+
+If a component defines `@keyframes`, the name is scoped to the component using the same hashing approach. Any `animation` rules in the component will be similarly adjusted:
+
+```svelte
+<style>
+	.bouncy {
+		animation: bounce 10s;
+	}
+
+	/* these keyframes are only accessible inside this component */
+	@keyframes bounce {
+		/* ... *.
+	}
+</style>
+```
+
+
+
@@ -0,0 +1,65 @@
+---
+title: Global styles
+---
+
+## :global(...)
+
+To apply styles to a single selector globally, use the `:global(...)` modifier:
+
+```svelte
+<style>
+	:global(body) {
+		/* applies to <body> */
+		margin: 0;
+	}
+
+	div :global(strong) {
+		/* applies to all <strong> elements, in any component,
+		   that are inside <div> elements belonging
+		   to this component */
+		color: goldenrod;
+	}
+
+	p:global(.big.red) {
+		/* applies to all <p> elements belonging to this component
+		   with `class="big red"`, even if it is applied
+		   programmatically (for example by a library) */
+	}
+</style>
+```
+
+If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
+
+The `-global-` part will be removed when compiled, and the keyframe will then be referenced using just `my-animation-name` elsewhere in your code.
+
+```svelte
+<style>
+	@keyframes -global-my-animation-name {
+		/* code goes here */
+	}
+</style>
+```
+
+## :global
+
+To apply styles to a group of selectors globally, create a `:global {...}` block:
+
+```svelte
+<style>
+	:global {
+		/* applies to every <div> in your application */
+		div { ... }
+
+		/* applies to every <p> in your application */
+		p { ... }
+	}
+
+	.a :global {
+		/* applies to every `.b .c .d` element, in any component,
+		   that is inside an `.a` element in this component */
+		.b .c .d {...}
+	}
+</style>
+```
+
+> [!NOTE] The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.