noInlineStyles (HTML)

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.
Sources:
- Same as @html-eslint/no-inline-styles

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;"></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>
      │      -------------------

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

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

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

Resources

Content Security Policy: Allowing inline styles