All rules

Sheath rule

best-practices-no-duplicate-attrs

Disallow duplicate attributes on the same element.
Package
Core
Category
Best Practices
Default severity
error by default
Auto-fix
Auto-fix available

#Why

Duplicate attributes on an element are invalid HTML. Browsers will only use one of the values (usually the first), which can lead to unexpected behavior and bugs that are hard to track down.

#Examples

#Bad

<!-- Duplicate class attribute -->

<div class="container" class="wrapper">Content</div>



<!-- Duplicate id attribute -->

<input type="text" id="email" id="user-email">



<!-- Duplicate data attribute -->

<button data-action="submit" data-action="save">Save</button>



<!-- Same attribute, different case (still duplicate) -->

<div CLASS="foo" class="bar">Content</div>

#Good

<!-- Single class attribute with multiple classes -->

<div class="container wrapper">Content</div>



<!-- Single id attribute -->

<input type="text" id="email">



<!-- Different data attributes -->

<button data-action="submit" data-target="form">Save</button>

#Auto-fix

The fixer removes duplicate attribute occurrences, keeping the first one:

<!-- Before -->

<div class="foo" class="bar">



<!-- After -->

<div class="foo">

#Notes

  • Plain HTML attribute comparison is case-insensitive (class and CLASS are considered duplicates)
  • Component tags are checked using Laravel's compiled PHP-array keys. Component key casing is significant, so foo and FOO remain distinct, while a bound prop and a static attribute of the same name (:label and label) are duplicates
  • The fix keeps the last duplicate on a component because component attributes compile into a PHP array. It keeps the first duplicate on a plain element because that is what the browser renders
  • To combine values, use a single attribute with space-separated values (for class) or combine the logic

#References

#Related Rules