Thinking in Logical Properties

There’s a well-known moment when learning a new language: your brain stops translating and starts thinking directly in it. The same transition, as Jeremy Keith describes, happens when picking up new CSS syntax. First you hear about a feature, then try it, then grok it, and eventually you reach for it without a second thought.

That flip is satisfying—it feels like leveling up. But logical properties in CSS aren’t quite there yet. They’ve arrived, and many of us are starting to think in them for layout, but inconsistencies remain.

When you’re in the logical mindset for spacing, you naturally write:

.button {
  padding-inline: 1rem;
  margin-inline: 1rem;
}

You can even replace width with inline-size for horizontal dimensions. However, until recently, container queries didn’t follow that pattern. You couldn’t express a breakpoint using inline-size; you had to fall back to traditional min-width and max-width. That kind of mismatch can fracture the mental model.

The good news: the draft spec for CSS Containment Level 3 shows the gap being closed. Its second example demonstrates:

main, aside {
  container: inline-size;
}

.media-object {
  display: grid;
  grid-template: 'img' auto 'content' auto / 100%;
}

@container (inline-size > 45em) {
  .media-object {
    grid-template: 'img content' auto / auto 1fr;
  }
}

Example 3 in that same draft includes @container (width > 40em), suggesting both forms may ship as valid. The author would prefer to standardize on logical properties only, but that choice likely isn't on the table at this stage.

Another gap Keith flags: overflow-* hasn’t been converted to logical terms yet. overflow-x should logically be overflow-inline, and right now only Firefox supports that naming. It’s an inconsistency that will hopefully be cleaned up.

Still, logical properties cover a lot of territory you can adopt today: sizing, positioning, margins, padding, borders, and alignment all have logical equivalents. Even border-top-left-radius becomes border-start-start-radius, and float: right turns into float: inline-end. The transition may not be seamless yet, but the syntax is already there for thinking in.