org.sonar.css.checks.l10n.common.duplicate-background-images.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


    One of the main rules of performance is to use as few bytes as possible to get the job done. Along those lines, URLs
    are best used just once inside of CSS. If you have more than one class that needs to use the same background image,
    then it's better to have one class that uses the URL and simply apply that class to the various elements where it is
    needed.


Noncompliant Code Example
Consider the following:
.heart-icon {
  background: url(sprite.png) -16px 0 no-repeat;
}

.task-icon {
  background: url(sprite.png) -32px 0 no-repeat;
}


    The background image is repeated in both classes. That's extra bytes you don't need and also increases the chances
    that you'll forget to change one should the filename change.


Compliant Solution

    An alternative is to define one class that has the URL and be sure to apply that class to the HTML elements where
    the other classes are used. For example:

.icon {
  background: url(sprite.png) no-repeat;
}

.heart-icon {
  background-position: -16px 0;
}

.task-icon {
  background-position: -32px 0;
}


    Here, the icon class contains the background image while the other classes just change the background
    position.


See

    CSSLint rule
        documentation