attr-value-no-duplication

Class attributes should not contain duplicate values. Other attributes can be checked via configuration.

Level: Error

Config value

• true: enable rule with default attributes (only class)
• ['attr1', 'attr2', ...]: specify custom list of attributes to check
• false: disable rule

Default attributes checked

By default, this rule only checks the class attribute for duplicate values:

• class - CSS class names should not be repeated

Other attributes can be checked by providing a custom configuration.

The following patterns are not considered rule violations

<div class="container fluid small">Content</div>

<!-- data-attributes not checked by default -->
<input data-attribute="apple banana apple">

The following patterns are considered rule violations:

<div class="d-none small d-none">Content</div>

Why does this rule exist?

Having duplicate values in class attributes can:

• Make the markup unnecessarily verbose
• Cause confusion during development
• Lead to inefficient CSS specificity calculations
• Indicate potential copy-paste errors or oversight

This rule helps maintain clean, efficient markup by catching these duplicates early.

Custom configuration

You can customize which attributes to check by providing an array:

{
  "attr-value-no-duplication": ["class", "id", "name", "role"]
}

{
  "attr-value-no-duplication": ["data-test", "aria-label", "custom-attr"]
}

This allows you to focus on attributes specific to your project needs.