Early on in web development, including the same CSS property twice was certainly an error, especially if there were two different values. For example:

    .mybox {
      width: 100px;
      width: 120px;
    }

Anyone looking at this code would think that this is clearly an error. Recently, however, including duplicate properties is used as a way to deal with varying levels of browser support for CSS properties. For example, some browsers support RGBA color while others do not, so it's quite common to see patterns such as:

    .mybox {
      background: #fff;
      background: rgba(255, 255, 255, 0.5);
    }

This is quite clearly intentional. The developer wants to use RGBA when available but wants to fall back to a regular color when not available.

This rule raises an issue when:

- A property is included twice and contains the same value.
- A property is included twice and is separated by at least one other property.

## Noncompliant Code Example

    /* Noncompliant: same value for the two declarations of the 'border' property */
    .mybox {
      border: 1px solid black;
      border: 1px solid black;
    }

    /* Noncompliant: duplicated 'border' properties separated by another property */
    .mybox {
      border: 1px solid black;
      color: green;
      border: 1px solid red;
    }

## Compliant Solution

    /* Compliant: 'border' properties defined one after another with different values */
    .mybox {
      border: 1px solid black;
      border: 1px solid red;
    }

## stylelint Related Rules

- declaration-block-no-duplicate-properties