CSS Logical Properties
debt(d3/e3/b3/t5)
Closest to 'default linter catches the common case' (d3). Stylelint with appropriate plugins can flag physical properties like margin-left when logical alternatives should be used, and rtlcss can detect RTL override patterns. These are standard tools in frontend workflows that can catch the common case of using physical properties where logical ones would be better.
Closest to 'simple parameterised fix' (e3). The quick_fix describes replacing margin-left/right with margin-inline-start/end — a straightforward find-and-replace pattern across CSS files. However, it's slightly more than a one-liner since you need to audit the entire stylesheet and may touch multiple files, but it's still a mechanical transformation within the CSS layer only.
Closest to 'localised tax' (b3). Logical properties apply to web contexts only and are CSS-scoped decisions. Once adopted, they reduce maintenance burden (no RTL stylesheet), but the choice doesn't shape the entire system architecture. It's a localised productivity improvement that affects the CSS layer without rippling into JavaScript or backend code.
Closest to 'notable trap' (t5). The misconception explicitly states developers think 'RTL support requires a separate RTL stylesheet' when logical properties eliminate this need. This is a documented gotcha most frontend devs eventually learn. Additional traps include mixing physical and logical properties causing conflicts, and not setting dir=rtl on the html element — both require learning but aren't catastrophically unintuitive once explained.
Also Known As
TL;DR
Explanation
CSS logical properties replace directional properties with flow-relative equivalents: inline (horizontal in LTR, vertical in TTB) and block (vertical in LTR, horizontal in TTB). margin-inline-start replaces margin-left (automatically becomes margin-right in RTL). padding-block replaces padding-top + padding-bottom. border-inline-end replaces border-right. inset-inline-start replaces left. Use logical properties from the start of a project — retrofitting physical properties for RTL languages requires overriding every physical property in RTL stylesheets.
Common Misconception
Why It Matters
Common Mistakes
- Mixing physical and logical properties — margin-left alongside margin-inline-start causes conflicts.
- Using logical properties for decorative directional elements — a left-pointing arrow should still be physical.
- Not setting dir=rtl on the html element for RTL languages — logical properties require a direction context.
- Browser support gaps — inset-* properties have slightly less support than margin-*/padding-*.
Code Examples
/* Physical properties — requires RTL override:
.nav-item { margin-left: 16px; border-right: 1px solid; padding-left: 8px; }
/* RTL override needed: */
[dir=rtl] .nav-item { margin-left: 0; margin-right: 16px;
border-right: none; border-left: 1px solid; padding-left: 0; padding-right: 8px; }/* Logical properties — RTL works automatically:
.nav-item {
margin-inline-start: 16px; /* margin-left in LTR, margin-right in RTL */
border-inline-end: 1px solid; /* border-right in LTR, border-left in RTL */
padding-inline-start: 8px;
}
/* No RTL override needed — browser handles it based on dir attribute */