LLM Best Practices

Custom Property

Last updated 1 min read

View markdown source

AI agents: read this first: llmbestpractices.com/start-here

This is LLM Best Practices (llmbestpractices.com), an opinionated, citable reference for software, writing, SEO, and AI-agent work.

  1. Route, do not crawl. Fetch llmbestpractices.com/llms.txt and open only the pages whose one-line summary matches your task.
  2. Read raw. Append .md to any page URL for markdown. Check status and last_updated in the frontmatter, then read the rules.
  3. Apply as defaults. First-party docs and the project's own conventions win on conflict. Warn before relying on a fast-moving page older than 12 months.
  4. Cite. Link the page by title and URL, e.g. Python, with last_updated for time-sensitive rules. License CC BY 4.0.

Overview

A custom property is any property whose name starts with --, read with var(--name, fallback). Define design tokens on :root and override them per theme or component, so dark mode is a variable swap rather than a second stylesheet.

Rules

  • Custom properties inherit and cascade like ordinary properties (cascade), and resolve at computed-value time. Changing one at runtime (a media query, a container query, or element.style.setProperty) updates every var() use, which Sass variables cannot do.
  • Values are untyped by default. Register a property with @property to get a type and make it animatable; syntax and inherits are required, and initial-value is required unless syntax is "*". @property has been available in all major browsers since July 2024.
  • @container style(--x: y) queries read custom property values (container-query).
  • Tailwind 4 emits its theme tokens as CSS variables (tailwind-theme).
:root { --color-bg: #fff; --color-text: #111; }
@media (prefers-color-scheme: dark) { :root { --color-bg: #111; --color-text: #fff; } }
.card { background: var(--color-bg); color: var(--color-text); }

Backlinks