---
title: Guides
description: When to use Distillate, theming, non-CSS surfaces, compact artifacts, React, Emotion migration, testing, and name collisions.
url: https://docs-v3-preview.elastic.dev/distillate/guides
---

# Guides
Task-oriented pages. Concepts live under [Concepts](https://docs-v3-preview.elastic.dev/distillate/concepts).
- [Distillate vs CSS-in-JS](https://docs-v3-preview.elastic.dev/distillate/guides/vs-emotion) — when Distillate is the right tool
- [Declare and select variations](https://docs-v3-preview.elastic.dev/distillate/guides/theming) — named diffs, `{ flatten }`, `{ alternates }`
- [Read values outside CSS](https://docs-v3-preview.elastic.dev/distillate/guides/non-css-surfaces) — literal theme values for SVG and other non-CSS surfaces
- [Ship a compact artifact](https://docs-v3-preview.elastic.dev/distillate/guides/compact-artifacts) — tree-shaken CSS for HTML that leaves the app
- [Integrate with a React renderer](https://docs-v3-preview.elastic.dev/distillate/guides/react-renderer) — collect handles while rendering
- [Migrate from Emotion](https://docs-v3-preview.elastic.dev/distillate/guides/emotion-migration) — `createEmotion` over the same registry
- [Test the var invariant](https://docs-v3-preview.elastic.dev/distillate/guides/var-invariant) — every `var(...)` has a declaration
- [Avoid readable-name collisions](https://docs-v3-preview.elastic.dev/distillate/guides/name-collisions) — hyphen-joined names must be unique