如何对 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

所有重复代码都可以在一个class中声明一次。

如果所有代码都针对单个元素（嵌套 span），这应该有效：

.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>

Answer 2

以此为起点进行重构：

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

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

Answer 3

使用不要重复自己 (DRY) 原则。这样，您将在整个代码中创建非重复模块。

.term-links有一个<span>元素作为后代，可以采用所有的结构样式：

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

现在每个国家都可以拥有自己独特的背景图片。例如

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

当然，使用 SASS 这更容易解决，您将在 .term-links class 和所有国家中选择您的选择器。示例：

.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... */
}

了解有关 OCSS 和 SASS 的更多信息：

如何对 css 规则进行排序和组合，使其不再重复？

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

css

minify