CSS Value Definition Syntax

What is Value Definition Syntax?

Every CSS developer encounters cryptic notation like <'border-width'> = <length>{1,4} or <'display'> = block | inline | flex when reading MDN documentation or CSS specifications. This formal notation, called CSS value definition syntax, follows specific rules that determine exactly what values are valid for each property.

Understanding this syntax transforms you from guessing acceptable values to confidently reading and interpreting CSS specifications. Whether you're working with responsive design techniques or building complex frontend architectures, mastering this notation is essential for writing maintainable stylesheets.

This guide breaks down the CSS value definition syntax into its component parts, explaining each symbol and notation so you can read any CSS property definition with confidence.

Component Value Types

CSS value definition syntax uses several types of component values to describe what values a property accepts. Each type serves a distinct purpose and follows specific formatting rules.

Keywords

Keywords are predefined terms with specific meanings in CSS. They appear literally in value definitions without quotation marks or angle brackets. For example, auto, block, inline, flex, and none are all keywords that can be used directly as property values. Keywords are terminal values, meaning they cannot be broken down further or replaced with other values. The syntax <'display'> = block tells you that block is a valid value for the display property.

Generic keywords like inherit, initial, revert, revert-layer, and unset are special CSS-wide keywords that every property accepts. These keywords control how values are inherited or reset and do not appear in individual property definitions but are always valid.

Data Types

Data types represent categories of values that a property can accept. They appear in angle brackets, like <length>, <color>, <number>, or <percentage>. Basic data types define core value categories used throughout CSS. For instance, <length> represents any length value (like 10px, 2em, or 5rem), while <color> represents any valid CSS color.

Property data types share the same name as a property and are enclosed in quotes within angle brackets, like <border-width>. These allow shorthand properties to reference the values of their component properties. Non-property data types, like <line-width>, define reusable value categories that are not themselves CSS properties.

Literals

Literals are punctuation symbols that appear in value definitions to separate or structure values. The slash (/) commonly separates values that are semantically different but share a syntax, such as in font or border-radius shorthand properties. The comma (,) separates items in lists or enumerations.

In the syntax <'font-weight'> = <number> | normal | bolder | lighter, the pipe symbols separate mutually exclusive options, while in <'border-radius'> = <length-percentage>{1,4}, curly braces indicate multipliers for repetition.

Component Value Combinators

Combinators define how component values can be arranged relative to each other. Each combinator has specific semantics that determine which arrangements are valid.

Brackets [ ]

Brackets [ ] group multiple components together so they are treated as a single unit. This grouping allows you to override the default precedence rules and create more complex value patterns. For example, the syntax [<length> | thin | thick] {1,4} means that one to four values from the grouped alternatives are valid. Brackets are essential for creating compound value definitions that would otherwise be ambiguous.

In practice, brackets appear frequently in properties with multiple optional components, especially when building modern CSS layouts with complex requirements.

Juxtaposition

When values are placed next to each other with only whitespace separating them, this is called juxtaposition. Juxtaposition means all components must appear in the exact order specified. For example, the syntax <display-outside> <display-inside> means both values must appear, with the outside value first and the inside value second.

This is common in multi-value properties like display, where display: inline flex follows the juxtaposition rule with inline as the outside value and flex as the inside value. Juxtaposition has higher precedence than combinators like double ampersand, so bold thin && <length> is equivalent to [bold thin] && <length>.

Double Ampersand &&

The double ampersand (&&) separates components that all must appear, but in any order. This combinator provides flexibility when the order of values should not matter. For example, <length-percentage> && <line-style> && <color> for the border shorthand means all three components are required, but they can appear in any combination.

Valid declarations include border: 1px solid red;, border: red solid 1px;, or border: solid 1px red;. This combinator is particularly useful for shorthand properties where authors benefit from flexible ordering.

Double Bar ||

The double bar (||) separates options where at least one must appear, but components may appear in any order and may be repeated. This is commonly used for properties with multiple optional features. The place-items property uses double bar syntax to allow specifying alignment for both axes independently or together.

Single Bar |

The single bar (|) creates mutually exclusive alternatives. Exactly one option from those separated by single bars must be chosen. This is the most restrictive combinator. For <'float'> = left | right | none, you must choose exactly one of these three values.

Component Value Multipliers

Multipliers indicate how many times a component or group may appear in a valid value. They follow the component or group they modify.

Asterisk

The asterisk (*) means the preceding component or group may appear zero or more times, with no upper limit. In practice, this appears in properties like gap where multiple values can be specified for different gap types.

Plus

The plus (+) means the preceding component must appear at least once, with no upper limit. This multiplier is used when one or more values are required but more can be added. The syntax <'box-shadow'> = <shadow># means one or more shadow values can be specified.

Question Mark

The question mark (?) means the preceding component is optional and may appear at most once. This is common for values that can be toggled on or off. For example, fill? in <'background-image'> indicates that the fill keyword is optional.

Curly Braces

Curly braces with numbers specify exact, minimum, or maximum occurrences. {1} means exactly one occurrence, {2,} means at least two with no upper limit, and {1,4} means between one and four occurrences. The <'border-width'> = <line-width>{1,4} syntax means one to four border widths can be specified.

Hash

The hash (#) represents {1,} meaning one or more occurrences separated by commas if the component is a list. This is a shorthand notation used extensively in modern CSS specifications for properties that accept comma-separated lists of values.

CSS-Wide Keywords

Five special keywords are valid for every CSS property, regardless of its defined syntax. These CSS-wide keywords provide ways to override or reset property values and are essential knowledge for debugging cascade issues.

• inherit - Sets the property value to match the parent's computed value, enabling explicit inheritance. This is particularly useful when working with CSS custom properties and theming systems.

• initial - Resets the property to its specification-defined default value. This is helpful when you need to override inherited styles and start from a clean slate.

• revert - Rolls back the cascade to the previous layer or user agent style, depending on cascade layer context. This provides more granular control over cascade layer precedence.

• revert-layer - Specifically reverts to the previous cascade layer's value. This is useful when working with complex CSS architecture and layer management.

• unset - Acts as inherit if the property inherits by default, or initial otherwise. This versatile keyword provides a clean way to reset values based on natural property behavior.

These keywords are always valid and cannot be combined with other values. When specified, they completely override any other declared values for that property.

Practical Examples

Reading Property Syntax

When you encounter a property syntax like <'border-image'> = <image> || <number> | stretch | repeat | round | space, you can decode it as follows: the double bar means one or more components must appear in any order, the pipe separates alternatives, and the keywords are literal values.

Valid declarations include border-image: url(image.png);, border-image: 5 stretch;, or border-image: url(image.png) 5 stretch round;.

Understanding Multipliers

The <'transform-list'> = <transform-function>+ syntax means one or more transform functions must be specified. Valid values include transform: rotate(45deg); or transform: rotate(45deg) scale(1.5) translateX(100px);.

Complex Syntax Breakdown

The syntax <'font'> = [ <font-style> || <font-weight> || <font-stretch> ]? <font-size> [ / <line-height> ]? <font-family> uses multiple combinators and brackets. The outer brackets group the optional style, weight, and stretch properties, the question mark makes the entire group optional, the slash is a literal separator, and juxtaposition connects the remaining required components.

This demonstrates how understanding CSS value definition syntax makes reading even complex property definitions straightforward.

Sources

1. MDN Web Docs: Value definition syntax - The authoritative source on CSS value definition syntax, covering all component types, combinators, and multipliers in detail.

2. MDN Web Docs: CSS values and units - Comprehensive overview of CSS values and units, including data types and how they integrate with the value definition syntax.

3. Smashing Magazine: Understanding The CSS Property Value Syntax - Practical guide explaining Backus-Naur Form origins and how to interpret W3C specifications.