CSS Mastery

Field Guide / intermediate

Logical properties: write layout rules by meaning, not direction

Logical properties make CSS describe inline and block flow instead of hard-coding left, right, top, and bottom.

By Andrew J Hughes

Physical properties describe the screen: left, right, top, bottom, width, height. Logical properties describe the flow of the document: inline start, inline end, block start, block end, inline size, block size.

For many English-only sites, physical properties appear to work. The benefit of logical properties is not only internationalization. They also make the CSS intent clearer.

Replace direction with flow

.article {
  max-inline-size: 68ch;
  margin-inline: auto;
  padding-block: 3rem;
}

This says the article has a readable inline measure, is centered on the inline axis, and has block spacing. It is more descriptive than max-width, margin-left, margin-right, padding-top, and padding-bottom.

Borders and callouts become safer

.note {
  border-inline-start: 0.35rem solid var(--note-accent);
  padding-inline-start: 1rem;
}

If the document direction changes, the accent stays at the start of the line. That is the behavior the component probably wanted.

Use logical sizing in layout primitives

inline-size, block-size, min-inline-size, and min-block-size are especially useful in shared layout code.

.media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
}

The rule is about the inline axis. It is not about a western left-to-right screen assumption.

Migration does not need to be dramatic

You do not have to convert every property in one pass. Start with new layout primitives, reusable components, and spacing utilities. Keep physical properties when the physical side is truly the point, such as anchoring a decorative element to the visual top-right corner.

Logical properties make the CSS read closer to the browser’s layout model. That reduces translation work when debugging.

References