frontend-syntax-css-nesting-logical-properties

name	frontend-syntax-css-nesting-logical-properties
description	Use when authoring modern CSS without a preprocessor and you need either native nesting (`&` selector, nested `@media` / `@container` inside a rule) or logical properties (`margin-inline`, `padding-block`, `inset-inline-start`, `block-size`, `inline-size`) for international, RTL, or vertical-writing-mode layouts. Also use when deciding between physical and flow-relative properties, when a layout breaks in Arabic or Hebrew, when a vertical-writing-mode component leaks margins on the wrong side, or when reaching reflexively for Sass / PostCSS-nesting syntax that no longer applies in evergreen-2026. Prevents the four canonical failures : expecting the Sass `&__icon` string-concat BEM trick to work in native nesting (it does NOT), mixing physical (`margin-left`) and logical (`margin-inline-start`) properties in the same component (cascade conflict), assuming `inline-size` always equals `width` (it maps to height under vertical writing modes), and dropping the `&` for a pseudo-class nest (`:hover { ... }` inside a parent silently becomes an invalid bare type selector rather than parent:hover). Covers the `&` nesting selector, the relaxed-nesting rule that lets bare class / id / attribute selectors nest as descendants, nesting at-rules (`@media`, `@container`, `@supports`) inside style rules, specificity behavior, the full logical-property catalog (size, margin, padding, border, border-radius, inset), the physical- to-logical mapping table, how `writing-mode` and `direction` (or `dir` HTML attribute) rotate the block / inline axes, the `:dir(ltr|rtl)` pseudo-class, and Baseline status for both feature areas. Keywords: CSS nesting, & nesting selector, native nesting, relaxed nesting, nested @media, nested @container, specificity nesting, logical properties, flow-relative properties, margin-block, margin-inline, padding-block, padding-inline, inset-block, inset-inline, block-size, inline-size, border-block, border-inline, border-start-start-radius, writing-mode, vertical-rl, vertical-lr, direction ltr, direction rtl, :dir, dir attribute, RTL layout broken, padding on wrong side, vertical writing breaks margins, & not working in CSS, no parent selector trick like Sass __icon, how do I nest CSS without Sass, what is the & selector, how to make CSS work in RTL, what are CSS logical properties, can I nest CSS natively, Arabic layout broken, Hebrew RTL CSS.
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Frontend Syntax : CSS Nesting and Logical Properties

Authoritative reference for two foundational evergreen-2026 CSS authoring features that share one design intent : removing the need for build tools (nesting replaces Sass, logical properties replace direction-aware CSS-in-JS). Both are Baseline Widely Available.

Quick Reference

Baseline status

Feature	Baseline tier	Source
Native CSS nesting (&, bare nesting, nested at-rules)	Widely Available since 2023	MDN : CSS nesting (verified 2026-05-19)
Logical properties (size, margin, padding, border, inset)	Widely Available	MDN : CSS Logical Properties (verified 2026-05-19)
`:dir(ltr	rtl)` pseudo-class	Widely Available since 2023

Per evergreen-2026, neither feature requires a @supports gate in production code.

One-screen nesting cheatsheet

.card {
  /* declarations apply to .card */
  color: var(--fg);

  /* bare nested selector : equivalent to ".card .title" */
  .title { font-weight: 600; }

  /* "&" required for pseudo-class and pseudo-element */
  &:hover { background: var(--hover); }
  &::before { content: ""; }

  /* "&" required for combinator-prefixed selectors */
  & > .icon { inline-size: 1rem; }
  & + .card { margin-block-start: 1rem; }

  /* nested at-rules : equivalent to wrapping ".card { ... }" in @media */
   (: ) {
    : ;
  }

   (inline-size > ) {
    : fr fr;
  }
}