noInlineStyles (JavaScript)

Summary

Rule available since: v2.4.9
Diagnostic Category: lint/nursery/noInlineStyles
This rule has an unsafe fix.
The default severity of this rule is information.

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noInlineStyles": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow the use of inline styles.

Inline styles via the style attribute make code harder to maintain and override, prevent reusability of styling, and can be a security concern when implementing a strict Content Security Policy (CSP).

Instead of inline styles, use CSS classes, CSS modules, or a styling library.

Examples

Invalid

1
<div style={{ color: "red" }}>Error</div>

code-block.jsx:1:6 lint/nursery/noInlineStyles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected style attribute.
  
  > 1 │ <div style={{ color: "red" }}>Error</div>
      │      ^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Inline styles make code harder to maintain, reduce reusability, and can prevent effective use of a strict Content Security Policy. Use external CSS classes or stylesheets instead.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the style attribute.
  
    1 │ <div·style={{·color:·"red"·}}>Error</div>
      │      ------------------------

1
React.createElement("div", { style: { color: "red" } });

code-block.js:1:30 lint/nursery/noInlineStyles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected style attribute.
  
  > 1 │ React.createElement("div", { style: { color: "red" } });
      │                              ^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Inline styles make code harder to maintain, reduce reusability, and can prevent effective use of a strict Content Security Policy. Use external CSS classes or stylesheets instead.
  
  ℹ 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.
  
  ℹ Unsafe fix: Remove the style attribute.
  
    1 │ React.createElement("div",·{·style:·{·color:·"red"·}·});
      │                              ------------------------

Valid

1
<div className="text-red">Error</div>

1
React.createElement("div", { className: "container" });

Resources

Content Security Policy: Allowing inline styles