Screens and other Block level Wrappers

AliasCSS uses scope wrapper prefixes for media queries, layers, container queries, and other block-level CSS wrappers.

A scope wrapper prefix does not behave like a normal utility prefix. Instead, it creates an outer CSS block such as @media, @layer, @container, or @starting-style. Because of that, AliasCSS parses scope wrappers before selectors, states, properties, and values.

Quick start

Single scope wrapper

<div class="@md-d-flex"></div>
<div class="@base-d-flex"></div>
<div class="@container-md-grid-template-columns-2"></div>
<div class="@dark-c-white"></div>

Grouped scope wrappers

<div class="@[md,base]-d-flex"></div>
<div class="@[container-md,base]-grid-template-columns-2"></div>
<div class="@[md,container-md][d-flex,gap-16px]"></div>

Core rule

A scope wrapper can be used in two ways:

1. Single scope wrapper

@scope-utility

Examples:

<div class="@md-d-flex"></div>
<div class="@base-d-flex"></div>
<div class="@container-md-grid-template-columns-2"></div>
<div class="@motion-reduce-an-none"></div>

2. Grouped scope wrappers

@[scope,scope,scope]-utility
@[scope,scope,scope][utility,utility]

Examples:

<div class="@[md,base]-d-flex"></div>
<div class="@[container-md,base]-grid-template-columns-2"></div>
<div class="@[dark,base][c-white,bgc-black]"></div>

Why @ is recommended

Every scope wrapper prefix is conceptually a block wrapper. The @ marker makes that meaning visible in the class name.

Recommended

<div class="@md-d-flex"></div>
<div class="@xs-dn"></div>
<div class="@dark-c-white"></div>
<div class="@container-md-grid-template-columns-2"></div>

Also valid for selected common scopes

<div class="md-d-flex"></div>
<div class="xs-dn"></div>
<div class="dark-c-white"></div>
<div class="print-display-none"></div>

AliasCSS currently supports a limited set of popular scope wrappers without @ for convenience. However, the recommended style is still to use @ because it clearly signals a scope wrapper.

Important grouped syntax rule

Inside @[...], use bare scope keys.

Correct

<div class="@[md,base]-d-flex"></div>
<div class="@[container-md,base]-grid-template-columns-2"></div>
<div class="@[dark,md][c-white,bgc-black]"></div>

Incorrect

<div class="@[md,@base]-d-flex"></div>
<div class="[@container-md,base]-grid-template-columns-2"></div>
<div class="[@dark,md][c-white,bgc-black]"></div>

Why? Because inside @[...], AliasCSS is already parsing a scope list. Each item is treated as a scope key, so the extra @ is unnecessary.

Order and precedence

The order inside @[...] matters.

AliasCSS reads scope keys from left to right. That order determines how the generated CSS blocks are nested.

Example

<div class="@[md,base]-d-flex"></div>

Conceptual output:

@media (min-width: 768px) {
  @layer base {
    .class {
      display: flex;
    }
  }
}

Reversed order

<div class="@[base,md]-d-flex"></div>

Conceptual output:

@layer base {
  @media (min-width: 768px) {
    .class {
      display: flex;
    }
  }
}

Rule

The order inside @[...] determines scope precedence.

That means:

1. the left-most scope wraps first
2. the next scope nests inside it
3. the final utility is generated in the deepest scope

Grammar order

Scope wrappers are parsed before the rest of the class.

Basic grammar

@[scope,scope,scope] → selector/state → property → value

With grouped utilities

@[scope,scope,scope][utility,utility,utility]

Mental model

1. Resolve scope wrappers.
2. Resolve selectors and states.
3. Resolve property and value.
4. Emit the CSS declaration inside the nested wrapper blocks.

Scope wrappers vs selectors

A scope wrapper is not the same thing as a selector or pseudo state.

Scope wrappers

• md
• xs
• dark
• base
• container-md
• motion-reduce
• starting-style

Selectors and states

• _p
• _div
• --hover
• --focus
• [data-state=open]

Example

<div class="@[md,base]_p-c-red"></div>

Mental model:

• @[md,base] creates the wrapper blocks
• _p targets the p selector inside those blocks
• c-red defines the final declaration

Supported scope wrappers

Examples

Single responsive scope

<div class="@md-w-500px"></div>
<div class="md-w-500px"></div>

Compiled idea:

@media (min-width: 768px) {
  .class {
    width: 500px;
  }
}

Single layer scope

<div class="@base-d-flex"></div>

Compiled idea:

@layer base {
  .class {
    display: flex;
  }
}

Single container scope

<div class="@container-md-grid-template-columns-2"></div>

Compiled idea:

@container (min-width: 768px) {
  .class {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

Grouped media + layer

<div class="@[md,base]-d-flex"></div>

Compiled idea:

@media (min-width: 768px) {
  @layer base {
    .class {
      display: flex;
    }
  }
}

Grouped container + layer

<div class="@[container-md,base]-grid-template-columns-2"></div>

Compiled idea:

@container (min-width: 768px) {
  @layer base {
    .class {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

Grouped responsive + container + grouped utilities

<div class="@[md,container-md][d-flex,gap-16px]"></div>

Compiled idea:

@media (min-width: 768px) {
  @container (min-width: 768px) {
    .class {
      display: flex;
      gap: 16px;
    }
  }
}

Best practices

• Prefer the @ form for single scope wrappers.
• Use no-@ aliases only when you intentionally want shorter syntax.
• When combining multiple scopes, always use @[...].
• Inside @[...], use bare scope keys.
• Keep scope order intentional, because order changes nesting precedence.
• Do not place selectors such as _p or states such as --hover inside the scope list.
• Use grouped utilities when several declarations share the same wrapper structure.

Common pitfalls

• Writing @[md,@base] instead of @[md,base]
• Assuming @[md,base] is the same as @[base,md]
• Mixing selectors into the scope list
• Chaining multiple scope wrappers without @[...]
• Assuming every scope wrapper currently has a no-@ alias

Cheat sheet

@md-d-flex
-> one media scope

md-d-flex
-> same as @md-d-flex (supported convenience alias)

@base-d-flex
-> one layer scope

@container-md-grid-template-columns-2
-> one container scope

@[md,base]-d-flex
-> media scope, then layer scope

@[container-md,base]-grid-template-columns-2
-> container scope, then layer scope

@[md,container-md][d-flex,gap-16px]
-> media + container with grouped utilities

Customize scope behavior

Want to customize responsive or media scope behavior?

See: Customize media prefix

See also

• Basic Usage
• CSS Selectors
• In-line Grouping
• Targeting Screens and Devices
• Layer System
• Advanced Customization