Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Added rule to detect multiple usage of the same background-image #200

merged 2 commits into from Nov 16, 2011


None yet
3 participants

hpbuniat commented Oct 20, 2011

When working with sprites it is likely that someone writes css like:
.aSpriteImage {background: url(image.png) ..}
.anotherSpriteImage {background: url(image.png) ..}
.yetAnotherSpriteImage {background: url(image.png) ..}

The common background-image should be applied by using a common class or specific selectors. This rule should detect such issues.

It would be better to do a reporter.report() at the line of the second instance of the image rather than a rollup warn. We're trying to get away from rollups.

Instead of going through this complex regular expression, which might miss multiple URLs on the same line, it would be better to examine each of the value parts. The value.parts array has each part of the value, and you can iterate over those parts and check the type property to see if it's a URI. For example:

if (value.parts[i].type == "uri") {
   actualUri = value.parts[i].uri;

All of the URL parsing is already done for you, you just need to grab the info.


nzakas commented Oct 20, 2011

Thanks for the pull request. This seems like a good idea. I've added some notes to the commit. If you can make those changes, I can merge in.


hpbuniat commented Oct 22, 2011

Thanks for your comments. I've updated the pull-request.

I think people might find this desc confusing and take it to mean "don't use sprites". Can we clarify it?


stubbornella commented Oct 28, 2011

I like this rule, but I'm concerned that people will take it to mean "don't use sprites" rather than "abstract your sprite class name". What should the error message look like to make the distinction very clear?


hpbuniat commented Oct 28, 2011

Most likely, the issue will occur while working with sprites - but there might also be arbitrary c&p. I think "Always use abstract class names for sprites, which should at least declare the background-image" brings it to the point - in almost all cases.
As this also violates principles of OOCSS, the rule might also refer to it?


nzakas commented Nov 16, 2011

I think this fits under the "Performance" category quite nicely (reducing bytes) as "Disallow duplicate images". @hpbuniat - I'll merge this in, do you want to take a stab at writing up some documentation in this form: https://github.com/stubbornella/csslint/wiki/Beware-of-box-model-size

@nzakas nzakas added a commit that referenced this pull request Nov 16, 2011

@nzakas nzakas Merge pull request #200 from hpbuniat/duplicate-background-url
Added rule to detect multiple usage of the same background-image

@nzakas nzakas merged commit b2ac3b7 into CSSLint:master Nov 16, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment