CSS

`css/logical-properties`

Sites that run or may run right to left use logical properties (margin-inline-start, inset-inline-end), not left and right.

minormanualfe-css-layout

Why

margin-left, padding-right, left and text-align: left describe the screen, not the text. When the page switches to dir="rtl", every one of them points the wrong way and needs an override, while logical properties follow the writing direction on their own.

Fix

Use margin-inline-start/-end, padding-inline, inset-inline-start, border-inline-end, text-align: start, inline-size and block-size. In a site that will only ever be left to right, logical properties are still a good default for new code; do not rewrite working code for it alone.

Examples

/* bad */
.icon { margin-right: 0.5rem; }
/* good */
.icon { margin-inline-end: 0.5rem; }

Sources

Facts

Id: css/logical-properties
Severity: minor
Check: manual a person reviews it; the report lists it as a checklist
Applies to: css scss less
Taught by the skill: fe-css-layout CSS layout
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/logical-properties