All rules

Sheath rule

best-practices-no-inline-styles

Reports inline style attributes for projects that choose to enforce CSS-class-based styling.
Package
Core
Category
Best Practices
Default severity
warning by default
Auto-fix
Auto-fix available

(dangerous) Preset: stylistic only; not included in recommended

#Why

A style attribute beats every selector in the stylesheet short of !important, so the usual ways of overriding it stop working. It also cannot express anything conditional: no media query, no :hover, no dark mode variant. And because it travels in the HTML, it is re-sent on every request rather than cached once.

#Examples

#Bad

<!-- Inline styles -->

<div style="color: red; font-size: 16px;">Warning</div>



<!-- Mixed with classes -->

<button class="btn" style="margin-top: 20px;">Submit</button>



<!-- Complex inline styles -->

<section style="display: flex; justify-content: center; align-items: center; min-height: 100vh;">

    Content

</section>

#Good

<!-- Use CSS classes -->

<div class="text-danger">Warning</div>



<!-- Utility classes -->

<button class="btn mt-4">Submit</button>



<!-- CSS class with flexbox -->

<section class="flex-center min-h-screen">

    Content

</section>

#Auto-fix

The fixer removes the style attribute. This is marked as a dangerous fix because it changes the visual appearance:

<!-- Before -->

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



<!-- After -->

<div>Warning</div>

#Options

Use this option to permit selected CSS properties while continuing to report others.

Option Type Default Description
allowedProperties array [] CSS property names (case-insensitive) that may appear in a style attribute 
<?php



'best-practices-no-inline-styles' => ['warning', [

    'allowedProperties' => [

        'animation-delay',

    ],

]],

A style attribute passes only when every declaration in it names an allowed property. With the config above, style="animation-delay: 0.8s" is fine, but style="animation-delay: 0.8s; color: red" is still reported because color is not on the list. Attributes whose value contains Blade output, such as style="width: {{ $w }}px", are always reported: the declared properties cannot be read reliably from a value decided at runtime.

Use this option for properties that intentionally remain inline, such as per-element animation-delay values.

#Exceptions

Inline styles are the only option in a few places:

  • Values computed at runtime, such as a progress width or a chart dimension
  • Email templates, where most clients strip <style> blocks
  • Third-party embeds that ship their own inline styles

For a whole directory, add it to ignore. For one element, an inline suppression keeps the rule live everywhere else:

{{-- sheath-disable-next-line best-practices-no-inline-styles --}}

<div style="width: {{ $percent }}%"></div>

#References

#Related Rules