org.sonar.css.checks.l10n.common.duplicate-properties.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of css-checks Show documentation

There is a newer version: 4.13


    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