CODEWITHSUNDEEP
cssminify
Michael Rogers
Michael Rogers

Reputation: 233

How to sort and combine this css rules so it doesn't repeat so much?

This css rules work, but oh dear, so many lines repeating rules, how can i minimize this i tried some sites to reduce it but i think humans can do better. Please show me examples, thanks.

HTML example (various regions change and all look like this)

<span class="term-links">Region: <a href="/region/japan/"><span class="japan">Japan</span></a></span>

CSS

 .term-links .usa {
        display: inline-block;
        width: 16px;
        height: 11px;
        background: url('/img/usa.gif');
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
    .term-links .japan {
        display: inline-block;
        width: 16px;
        height: 11px;
        background: url('/img/japan.gif');
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
    .term-links .europe {
        display: inline-block;
        width: 16px;
        height: 11px;
        background: url('/img/europe.gif');
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
    .term-links .korea {
        display: inline-block;
        width: 16px;
        height: 11px;
        background: url('/img/korea.gif');
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
    .term-links .china {
        display: inline-block;
        width: 16px;
        height: 11px;
        background: url('/img/china.gif');
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }

Upvotes: 3

Views: 79

Answers (3)

Owen
Owen

Reputation: 1547

Refactor using this as a starting point:

.term-links span
{
    display: inline-block;
    width: 16px;
    height: 11px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.term-links .usa {
    background: url('/img/usa.gif');
}
.term-links .japan {
    background: url('/img/japan.gif');
}

It's perfectly acceptable to have multiple rules for the same element.

Upvotes: 4

gdyrrahitis
gdyrrahitis

Reputation: 5978

Use the Don't Repeat Yourself (DRY) Principal. This way you will create non-repeating modules throughout your code.

.term-links has a <span> element as a descendant, which can take all the structure styles:

.term-links span {
     display: inline-block;
     width: 16px;
     height: 11px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
}

Now each country can have its unique background image. Eg.

.china {
    background: url('/img/china.gif');
}

Of course, with SASS this is easier to solve, you will have your selector in .term-links class and all countries into it. Example:

.term-links span {
     display: inline-block;
     width: 16px;
     height: 11px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;

    .china {
        background: url('/img/china.gif');
    }

    /* Rest of countries here... */
}

Learn more about OCSS and SASS:

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371251

All the duplicate code can be declared once in a single class.

If all the code is meant to target a single element (the nested span), this should work:

.terms-links span {
    display: inline-block;
    width: 16px;
    height: 11px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.usa    { background: url('/img/usa.gif');    }
.japan  { background: url('/img/japan.gif');  }
.europe { background: url('/img/europe.gif'); }
.korea  { background: url('/img/korea.gif');  }
.china  { background: url('/img/china.gif');  }
<span class="term-links">Region: <a href="/region/japan/">
<span class="japan">Japan</span></a>
</span>

Upvotes: 2

Related Questions