no-inline-styles

This rule disallows the use of inline styles.

Why?

Using inline styles in HTML is generally considered bad practice for several reasons:

  1. Readability and Maintainability:
    1. Inline styles can make the HTML code less readable and harder to maintain, especially as the project grows. It becomes challenging to identify and manage styles applied to different elements when they are scattered throughout the HTML.
  2. Reusability:
    1. Inline styles don't promote code reuse. If you want the same style applied to multiple elements, you have to duplicate the inline style for each element. This can lead to redundancy and increases the chances of errors.
  3. CSS Specificity Issues:
    1. Inline styles have a high level of specificity, making it harder to override them with external or internal styles. This can lead to unexpected styling behavior and conflicts.

How to use

.eslintrc.js 
module.exports = {
  rules: {
    "@html-eslint/no-inline-styles": "error",
  },
};

Rule Details

Examples of incorrect code for this rule:

<div style="color:#ff0a00"></div>

Examples of correct code for this rule:

<div class="some-color"></div>