[csswg-drafts] Proposal: CSS Object Variables with Dot Notation (#13348)

mmorgan4x has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: CSS Object Variables with Dot Notation ==
## The Problem
CSS custom properties require long, flat names that become unwieldy in large design systems. Managing hundreds of variables like `--design-system-colors-palette-primary-brand-500` is difficult, error-prone, and provides no clear hierarchy or structure.

## The Solution
Allow developers to define custom properties as nested objects and access them using dot notation, matching JavaScript object syntax. This provides clear hierarchy, better organization, and intuitive access patterns familiar to modern web developers.

## Proposed Syntax

### Defining Object Variables

```css
:root {
  --theme: {
    colors: {
      primary: {
        base: #3b82f6;
        light: #60a5fa;
        dark: #2563eb;
      }
      secondary: {
        base: #8b5cf6;
        light: #a78bfa;
      }
    }
    spacing: {
      sm: 0.5rem;
      md: 1rem;
      lg: 1.5rem;
    }
  };
}
```

### Accessing with Dot Notation

```css
.button {
  background: var(--theme.colors.primary.base);
  padding: var(--theme.spacing.md);
}

.button:hover {
  background: var(--theme.colors.primary.dark);
}
```

### Complete Example

```css
/* Define design tokens */
:root {
  --design-system: {
    colors: {
      brand: #0066cc;
      success: #00cc66;
      error: #cc0000;
    }
    typography: {
      family: 'Inter, sans-serif';
      size: {
        sm: 0.875rem;
        base: 1rem;
        lg: 1.125rem;
      }
    }
    spacing: {
      1: 0.25rem;
      2: 0.5rem;
      4: 1rem;
    }
  };
}

/* Use in components */
.alert-success {
  background: var(--design-system.colors.success);
  padding: var(--design-system.spacing.4);
  font-size: var(--design-system.typography.size.base);
}

.heading {
  font-family: var(--design-system.typography.family);
  font-size: var(--design-system.typography.size.lg);
  color: var(--design-system.colors.brand);
}
```

## Why This Matters

**Developer Experience:** Matches JavaScript object notation that developers already know, reducing cognitive load and learning curve.

**Organization:** Clear hierarchical structure makes large design systems manageable and self-documenting.

**Tooling:** Enables better autocomplete, type checking, and refactoring tools that understand relationships between properties.

**Scalability:** Systems can grow from dozens to thousands of tokens without becoming unmaintainable.


## Closing Thoughts

CSS has evolved to support modern web development needs—from Flexbox to Grid to Custom Properties. As design systems grow increasingly complex, our variable management tools should evolve too. Dot notation provides the natural next step: bringing the organizational clarity of JavaScript objects to CSS custom properties.

While this requires a syntax change, the long-term benefits to developer productivity and code maintainability justify the investment. The web platform has successfully adopted breaking improvements before when the value was clear—this is another such opportunity.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13348 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 14 January 2026 16:45:51 UTC