Logical properties
CSS that says 'inline-start' instead of 'left', so margins, padding, and borders flip themselves when the page switches to a right-to-left language.
See it
What it is
Physical CSS names sides of the screen: left, right, top, bottom. Logical CSS names sides of the text flow: inline-start, inline-end, block-start, block-end. In a left-to-right page inline-start is the left; in an RTL page it becomes the right, on its own, with no second stylesheet. So margin-inline-start: 16px reads as 'space before the text begins', whichever way the text runs.
The set covers most of what you reach for daily: margin-inline and margin-block, padding-inline-start, border-inline-end, inset-inline-start for positioned elements, text-align: start and end, and inline-size / block-size in place of width / height. Support is universal in current browsers, so the sane default for any new component is logical first, physical only when you genuinely mean the left edge of the screen.
Gotcha: logical properties follow writing-mode as well as direction. Under vertical-rl the axes rotate, so inline-size stops meaning width. They also do nothing for transforms, box-shadow offsets, background-position, or SVG paths, which still need a manual RTL override. And mixing margin-left with margin-inline-start on the same element is a cascade fight you will lose at 2am.
Ask AI for it
Refactor this stylesheet to CSS logical properties. Replace margin-left/right with margin-inline-start/end or the margin-inline shorthand, padding-left/right with padding-inline, left/right on positioned elements with inset-inline-start/end, border-left/right with border-inline, text-align: left/right with start/end, and width/height with inline-size/block-size wherever the box should follow text flow. Keep physical values only where the effect is genuinely anchored to the screen. Then flag every transform, box-shadow, and background-position that still needs a manual [dir='rtl'] override.