如何对css规则进行排序和组合，使其不受'；不要重复那么多？

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

HTML示例（不同的区域会发生变化，所有区域都是这样）

---

所有重复代码可以在单个类中声明一次

如果所有代码都指向一个元素（嵌套的

span

），则应该可以：

。术语链接{
显示：内联块；
宽度：16px；
高度：11px；
文本缩进：100%；
空白：nowrap；
溢出：隐藏；
}
.usa{background:url（'/img/usa.gif'）；}
.japan{背景：url（'/img/japan.gif'）；}
.europe{背景：url（'/img/europe.gif'）；}
.korea{background:url（'/img/korea.gif'）；}
.china{background:url（'/img/china.gif'）；}

地区：

以此为起点重构：

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

---

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

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

.term links

有一个

元素作为子元素，可以采用所有结构样式：

.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更容易解决这一问题，您将在

中设置选择器。术语链接
类和所有国家/地区。
例如：

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





相应更新感谢您的反馈，希望现在它更具可读性，更少混乱。问题，这会影响所有国家/地区的术语链接吗？是-任何与CSS选择器匹配的内容
。术语链接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');
}

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