Linter Rule: Disallow inline style attributes

Rule: html-no-style-attributes

Description

Disallow the use of inline style attributes on HTML elements. All styling should be applied via external stylesheets or class-based styling.

Rationale

Inline style attributes make templates harder to maintain, promote duplication, and prevent adoption of strict CSP policies (style-src 'self'). Using CSS classes and external stylesheets improves maintainability and security.

Examples

✅ Good

<button class="btn btn-primary">Submit</button>

<div data-controller="hello" data-action="click->hello#greet">Content</div>

🚫 Bad

<button style="color: red;">Submit</button>

<div style="<%= custom_styles %>">Content</div>

References

• Inspired by @pushcx
• MDN: Content Security Policy (CSP)