Supporting right-to-left languages usually means duplicating stylesheets or reaching for a JavaScript mirroring library that flips the DOM at runtime. CSS logical properties offer a cleaner path: instead of `margin-left` and `padding-right`, you write `margin-inline-start` and `padding-inline-end`, and the browser flips the direction for you based on the document's writing mode, with no duplicated CSS and no runtime cost.
The trigger for us this quarter was a client project that needed Arabic support added to an existing English-only site. Rather than write a parallel RTL stylesheet the way we had on a previous project, we rewrote the layout using logical properties throughout: `inline-start` and `inline-end` in place of left and right, `block-start` and `block-end` in place of top and bottom, and `text-align: start` instead of `text-align: left`. Once that was done, adding the Arabic locale meant setting `dir="rtl"` on the html element and nothing else in the CSS needed to change at all.
Browser support has finally reached the point where we're comfortable shipping logical properties without a fallback for our supported browser matrix, which currently excludes anything older than the last two major versions of each evergreen browser. The migration on the existing English site was mechanical enough to script with a find-and-replace pass covering the common property pairs, though flex and grid layouts still needed a manual review, since `flex-direction: row` and grid template columns don't automatically follow logical direction the way margin and padding properties do, and a couple of components had direction assumptions baked directly into the markup order rather than the CSS.
One rough edge worth flagging: logical border-radius properties like `border-start-start-radius` have noticeably weaker browser support than the margin and padding equivalents, so we left corner radii on the physical properties for now and revisit that decision once support catches up. We also found it useful to test the RTL flip early and often during development by toggling the `dir` attribute in devtools rather than waiting until the Arabic content was actually ready, since it surfaced a few components where absolute positioning had a hardcoded `left: 0` that logical properties alone couldn't fix.
If you're building anything that might need Arabic, Hebrew, or another right-to-left language down the line, adopting logical properties now is cheap insurance against a much more painful retrofit later. Even on projects with no RTL requirement on the horizon, we've started defaulting to logical properties for new components simply because they've become the more future-proof habit, and the mental overhead of using them has turned out to be close to zero once the initial vocabulary sinks in.