CSS Nesting & Logical Properties

Two more modern additions reduce repetition and improve internationalization support, both natively in CSS without a preprocessor.

Native CSS nesting, previously only available through Sass/LESS, lets selectors be written inside one another:

.card {
  background: white;
  border-radius: 8px;

  & .title {
    font-size: 1.2rem;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  & .button {
    background: blue;

    &:hover {
      background: darkblue;
    }
  }
}

The & symbol refers back to the parent selector, exactly as in Sass — but this now runs natively in the browser with zero build step required. Nesting keeps related styles visually grouped together in the source, mirroring the HTML structure they target.

Logical properties replace direction-specific properties (left/right, top/bottom) with flow-relative equivalents that automatically adapt to a page's writing direction:

.box {
  /* Old, direction-specific way */
  margin-left: 16px;
  padding-right: 8px;

  /* New, logical equivalent */
  margin-inline-start: 16px;
  padding-inline-end: 8px;
}

• inline-start/inline-end — correspond to the start/end of the text direction (left/right in English, but automatically flipped to right/left in a right-to-left language like Arabic or Hebrew).
• block-start/block-end — correspond to the top/bottom in most writing modes.

For any site that might support multiple languages, including right-to-left scripts, logical properties eliminate an entire category of manual RTL-specific overrides that used to require duplicating stylesheets or adding [dir="rtl"] selector overrides throughout the codebase.