useLogicalProperties (CSS)

Language CSS

Note

This rule has been implemented but not released yet. It will be available in the next release.

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Diagnostic Category: lint/nursery/useLogicalProperties
• This rule doesn’t have a fix.
• The default severity of this rule is warning.

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useLogicalProperties": "error"
      }
    }
  }
}

Description

Enforce logical properties over physical properties.

Physical properties such as width, height, top, left, margin-top, padding-left, border-top, border-left-color, etc. are tied to writing direction. Logical properties such as inline-size, block-size, inset-block-start, margin-block-start, padding-inline-end, border-block-start, border-inline-start-color, etc. adapt more consistently across different writing modes.

Examples

Invalid

p {
  width: 100%;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use logical CSS properties over physical ones.
  
    1 │ p {
  > 2 │   width: 100%;
      │   ^^^^^
    3 │ }
    4 │ 
  
  ℹ Logical properties adapt better to different writing modes and layout directions.
  
  ℹ Replace width with inline-size.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

p {
  top: 0;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use logical CSS properties over physical ones.
  
    1 │ p {
  > 2 │   top: 0;
      │   ^^^
    3 │ }
    4 │ 
  
  ℹ Logical properties adapt better to different writing modes and layout directions.
  
  ℹ Replace top with inset-block-start.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

p {
  margin-left: 1rem;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use logical CSS properties over physical ones.
  
    1 │ p {
  > 2 │   margin-left: 1rem;
      │   ^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ Logical properties adapt better to different writing modes and layout directions.
  
  ℹ Replace margin-left with margin-inline-start.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

p {
  border-left: 1px solid;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use logical CSS properties over physical ones.
  
    1 │ p {
  > 2 │   border-left: 1px solid;
      │   ^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ Logical properties adapt better to different writing modes and layout directions.
  
  ℹ Replace border-left with border-inline-start.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

Valid

p {
  inline-size: 100%;
  inset-block-start: 0;
  margin-inline-start: 1rem;
  border-inline-start: 1px solid;
}

Options

direction

The text direction used to map physical inline properties. It can be either "ltr" or "rtl". Defaults to "ltr".

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useLogicalProperties": {
          "level": "on",
          "options": {
            "direction": "rtl"
          }
        }
      }
    }
  }
}

Invalid

p {
  margin-left: 1rem;
}

code-block.css:2:3 lint/nursery/useLogicalProperties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Use logical CSS properties over physical ones.
  
    1 │ p {
  > 2 │   margin-left: 1rem;
      │   ^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ Logical properties adapt better to different writing modes and layout directions.
  
  ℹ Replace margin-left with margin-inline-end.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

Valid

p {
  margin-inline-end: 1rem;
}

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground