如何对这些CSS规则进行排序和组合，以便不会重复太多？

Question

如何对这些CSS规则进行排序和组合，以便不会重复太多？

3

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

- Michael Rogers

3个回答

2

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

如果所有的代码都是针对单个元素（嵌套的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>

- Michael Benjamin

2

使用不重复原则（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 类中找到你的选择器和其中的所有国家。

示例：

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

- gdyrrahitis

已相应更新 - gdyrrahitis

感谢您的反馈，希望现在它更易读且不那么令人困惑。 - gdyrrahitis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Owen · Accepted Answer

使用此作为起点进行重构：

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

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