zmoazeni / csscss

A CSS redundancy analyzer that analyzes redundancy.
http://zmoazeni.github.io/csscss/
MIT License
2.92k stars 151 forks source link

What about checking for just duplicated rules? #59

Closed ericpromislow closed 11 years ago

ericpromislow commented 11 years ago

I personally disagree with csscss's implied suggestion that I refactor something like

h1 {
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/h1.png) no-repeat right top;
}

h2 {
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/h2.png) no-repeat right top;
}

to

h1, h2 {
    padding: 2px 0px;
    margin: 2px 0px;
    background-repeat: no-repeat;
    background-position: right top;
}

h1 {
    background-image: url(../img/h1.png)
}

h2 {
    background-image: url(../img/h2.png)
}

As stylesheets get more complex, it becomes harder to determine all the styles for a given selector. I would rather keep all the properties for each selector together, and use a preprocessor like Less or SCSS/Sass to eliminate the duplication via variables. However, csscss is silent with input like this:

h1 {
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/h1.png) no-repeat right top;
}

h1 {
    padding: 6px 0px;
    margin: 2px 0px;
    background: url(../img/h1.png) no-repeat right top;
}

I'd like to know that I have some redundant declarations for the same selector, as well as a conflicting declaration.

Are there plans for csscss to handle both these cases, or am I looking for a different kind of tool?

zmoazeni commented 11 years ago

I haven't considered that use case. Thanks for the feedback. I'll chew on it a bit.

Sent from my iPhone

On Apr 17, 2013, at 5:24 PM, ericpromislow notifications@github.com wrote:

I personally disagree with csscss's implied suggestion that I refactor something like

h1 { padding: 2px 0px; margin: 2px 0px; background: url(../img/h1.png) no-repeat right top; }

h2 { padding: 2px 0px; margin: 2px 0px; background: url(../img/h2.png) no-repeat right top; } to

h1, h2 { padding: 2px 0px; margin: 2px 0px; background-repeat: no-repeat; background-position: right top; }

h1 { background-image: url(../img/h1.png) }

h2 { background-image: url(../img/h2.png) } As stylesheets get more complex, it becomes harder to determine all the styles for a given selector. I would rather keep all the properties for each selector together, and use a preprocessor like Less or SCSS/Sass to eliminate the duplication via variables. However, csscss is silent with input like this:

h1 { padding: 2px 0px; margin: 2px 0px; background: url(../img/h1.png) no-repeat right top; }

h1 { padding: 6px 0px; margin: 2px 0px; background: url(../img/h1.png) no-repeat right top; } I'd like to know that I have some redundant declarations for the same selector, as well as a conflicting declaration.

Are there plans for csscss to handle both these cases, or am I looking for a different kind of tool?

— Reply to this email directly or view it on GitHub.

zmoazeni commented 11 years ago

@ericpromislow I haven't made a decision on duplicate/overridden rules within the same selector yet, though I do like the idea.

But I did want to give you a heads up that I just implemented a new flag --ignore-sass-mixins that will be released in v1.3.0. You might dig it.

zmoazeni commented 11 years ago

I'm going to close this now that --ignore-sass-mixins has been released.