This is a proposal for adding parameterized selectors and inline expressions to CSS for runtime computation

1. Introduction

CSS is currently a declarative styling language, but lacks runtime mechanisms for logic, parameterization, and computation based on computed element values.

Today, developers rely on:

Preprocessors (Sass, LESS, Stylus) for variables and conditional logic (compile-time only).

CSS Houdini or JavaScript for runtime computations.

This proposal introduces parametric CSS rules to allow runtime-safe computations directly within CSS.

2. Syntax

2.1 Parametric Selector

.selector(param1, param2, ...) { ... }

Parameters are bound to intrinsic element properties.

Example reserved keywords:

w → element width

h → element height

c → computed text color

bg → computed background color

2.2 Expressions

Expressions may contain:

Arithmetic: +, -, *, /

Comparisons: ===, !=, <, >, <=, >=

Conditional ternary: condition ? value1 : value2

3. Examples

.card(h) {
height: h * 2;
background: h === 100 ? red : blue;
}

.title(w) {
font-size: w > 500 ? 2rem : 1rem;
}

.alert(c) {
border-color: c === red ? black : c;
}

4. Processing Model

5. Browser computes element’s intrinsic properties (w, h, etc.).

6. Parametric rules are resolved after style computation.

7. On layout changes (resize, reflow), parametric rules are re-evaluated.

8. If parameters are unavailable, expressions resolve to auto.

5. Security and Performance

No arbitrary JavaScript execution is allowed.

Only safe arithmetic/conditional expressions are permitted.

Evaluations are sandboxed and optimized for reflow events.

6. Relation to Other Features

Custom Properties: parametric CSS extends runtime flexibility beyond variables.

Container Queries: parametric rules complement container-based styling.

Houdini: advanced logic should still use Houdini Paint/Properties API.

Preprocessors: unlike Sass/LESS, evaluation happens at runtime, not compile time.

7. Future Work

Allow user-defined parameters (.card(@ratio)).

Allow referencing other computed properties (.card(sibling.w)).

Integration with Houdini for custom bound values.