Disallow inline style (no-inline-style)

Inline style is a sign of unstructured CSS. Use class or ID with a separate stylesheet.

Rule details

Examples of incorrect code for this rule:

<p style="color: red"></p>
error: Inline style is not allowed (no-inline-style) at inline:1:4:
> 1 | <p style="color: red"></p>
    |    ^^^^^^^^^^^^^^^^^^


1 error found.

Examples of correct code for this rule:

<p class="error"></p>

Options

This rule takes an optional object:

{
  "include": [],
  "exclude": [],
  "allowedProperties": ["display"]
}

Both include and exclude are only useful when using a framework with dynamic attributes such as ng-style or :style to allow/disallow one or more specific variant of the attribute. For instance:

<p :style="style></p>

would normally trigger the rule when using html-validate-vue but by adding :style to exclude it can be allowed.

include

If set only attributes listed in this array generates errors.

exclude

If set attributes listed in this array is ignored.

allowedProperties

List of CSS properties to ignore. If the style attribute contains only the properties listed no error will be yielded.

By default display is allowed.

<p style="display: none"></p>