max-element-depth

This rule enforces element maximum depth.

Why?

Deeply nested HTML structures can be difficult to read and understand, making the code harder to maintain. A flatter structure is more intuitive for developers, reducing the likelihood of errors and improving collaboration.

Deep nesting can increase the complexity of rendering for browsers. The browser's layout engine needs to compute styles and positions for all elements, and deeply nested structures can slow down this process, especially on resource-constrained devices.

How to use

.eslintrc.js 
module.exports = {
  rules: {
    "@html-eslint/max-element-depth": "error",
  },
};

Rule Details

Options

This rule has an object option:

  1. "max": Maximum element depth to allow.
"@html-eslint/element-newline": ["error", {
  "max": number
}]

Examples of incorrect code for this rule with the {"max": 2} option:

<div>
    <div>
        <div>
        </div>
    </div>
</div>

Examples of correct code for this rule with the {"max": 2} option:

<div>
    <div>
    </div>
</div>

Further Reading

  1. Avoid an excessive DOM size