css - 如何排序和组合此 css 规则，以免重复太多？

Question

这个 css 规则有效，但是天啊，这么多行重复规则，我怎样才能最小化它？我尝试了一些网站来减少它，但我认为人类可以做得更好。请举例说明，谢谢。

HTML 示例(各个区域变化，看起来都是这样)

<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;
    }

Answer 1

以此为起点进行重构:

.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');
}

同一元素有多个规则是完全可以接受的。