prefer-logical-properties
October 27, 2025 ยท View on GitHub
Prefer logical properties over physical properties.
Background
Logical properties are a set of CSS properties that map to their physical counterparts. They are designed to make it easier to create styles that work in both left-to-right and right-to-left languages. Logical properties are useful for creating styles that are more flexible and easier to maintain.
Rule Details
This rule checks for the use of physical properties and suggests using their logical counterparts instead.
Examples of incorrect code for this rule:
/* eslint css/prefer-logical-properties: "error" */
/* incorrect use of physical properties */
a {
margin-left: 10px;
}
Examples of correct code for this rule:
/* eslint css/prefer-logical-properties: "error" */
a {
margin-inline-start: 10px;
}
Options
This rule accepts an option object with the following properties:
allowProperties(default:[]) - Specify an array of physical properties that are allowed to be used.allowUnits(default:[]) - Specify an array of physical units that are allowed to be used.
allowProperties
Examples of correct code with { allowProperties: ["margin-left"] }:
/* eslint css/prefer-logical-properties: ["error", { allowProperties: ["margin-left"] }] */
a {
margin-left: 10px;
}
allowUnits
Examples of correct code with { allowUnits: ["vw"] }:
/* eslint css/prefer-logical-properties: ["error", { allowUnits: ["vw"] }] */
a {
margin: 10vw;
}
When Not to Use It
If you aren't concerned with the use of logical properties, then you can safely disable this rule.