noInlineStyles

JavaScript (and super languages)

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/noInlineStyles
• This rule has an unsafe fix.
• The default severity of this rule is information.

How to configure

biome.json

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

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

<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>
      │      ------------------------            

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

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

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

Resources

• Content Security Policy: Allowing inline styles

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases

HTML

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/noInlineStyles
• This rule has an unsafe fix.
• The default severity of this rule is information.
• Sources:
  • Same as @html-eslint/no-inline-styles

How to configure

biome.json

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

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

<div style="color: red;"></div>

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

  ℹ Unexpected style attribute.
  
  > 1 │ <div style=“color: red;”></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;”></div>
      │      -------------------       

<p style="font-size: 14px;">Hello</p>

code-block.html:1:4 lint/nursery/noInlineStyles  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected style attribute.
  
  > 1 │ <p style=“font-size: 14px;“>Hello</p>
      │    ^^^^^^^^^^^^^^^^^^^^^^^^
    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 │ <p·style=“font-size:·14px;“>Hello</p>
      │    ------------------------          

Valid

<div class="text-red"></div>

<p class="body-text">Hello</p>

Resources

• Content Security Policy: Allowing inline styles

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases