Direction-aware layouts without left and right
You used margin-left, padding-right, border-left, then overrode everything for RTL with [dir="rtl"]. Logical properties are direction-aware so one set of rules works for both.
2 margin-left: 1rem;
3 padding-right: 1rem;
4}
5
6[dir="rtl"] .box {
7 margin-left: 0;
8 margin-right: 1rem;
9}
10/* Duplicate and flip for RTL */
2 margin-inline-start: 1rem;
3 padding-inline-end: 1rem;
4 border-block-start: 1px solid;
5}
6/* RTL: no extra rules */
One set of rules
inline-start and block-start follow writing direction. No [dir="rtl"] overrides.
Less code
Drop the RTL override block. Logical properties flip automatically when direction changes.
Future-proof
Works for vertical writing modes too. block and inline mean the same in any direction.
How it works
The old approach was to use physical properties like margin-left, padding-right, border-left, then add a [dir="rtl"] block that reset and flipped them. That meant maintaining two sets of values and missing one caused layout bugs in RTL.
Logical properties map to the writing mode. margin-inline-start is left in LTR and right in RTL. border-block-start is top in horizontal writing mode. Use inline for start/end (left/right in LTR) and block for block-start/block-end (top/bottom). Set dir on the document or a container and the same CSS works for both directions.