html - 在单独修改每个类的其他设置之前，通过组合类来设置字体系列来简化 CSS 是个好主意吗？

Question

对于这个冗长(并且可能是愚蠢的)问题深表歉意。我不是专业的网站开发人员，但我在业余时间开发一个网站，用于与 friend 合作的一个志愿元素。

简而言之，不要这样做:

.dlwindows {
    font-family: Minnie;
    text-decoration: none;
    background-image: linear-gradient(#39a3ed, #1280cf);
    width: 42.2797vh;
    color: #c4efff;
    border: none;
    border-radius: 2.57998vh;
    text-shadow: 0.516vh 0.516vh 0 #004582;
    padding: 3.096vh 3.612vh;
    margin: 1.464vh;
    font-size: 6.192vh;
    cursor: pointer;
}

.dlmacos {
    font-family: Minnie;
    text-decoration: none;
    background-image: linear-gradient(#a8b0bd, #7f8793);
    width: 42.2797vh;
    color: #fefefe;
    border: none;
    border-radius: 2.57998vh;
    text-shadow: 0.516vh 0.516vh 0 #646672;
    padding: 3.096vh 3.612vh;
    margin: 1.464vh;
    font-size: 6.192vh;
    cursor: pointer;
}

.dllinux {
    font-family: Minnie;
    text-decoration: none;
    background-image: linear-gradient(#f3aa3d, #e88d1c);
    width: 42.2797vh;
    color: #ffdb9e;
    border: none;
    border-radius: 2.57998vh;
    text-shadow: 0.516vh 0.516vh 0 #77351a;
    padding: 3.096vh 3.612vh;
    margin: 1.464vh;
    font-size: 6.192vh;
    cursor: pointer;
}

我应该这样做吗？:

.dlwindows, .dlmacos, .dllinux {
    font-family: Minnie;
}

.dlwindows {
    text-decoration: none;
    background-image: linear-gradient(#39a3ed, #1280cf);
    width: 42.2797vh;
    color: #c4efff;
    border: none;
    border-radius: 2.57998vh;
    text-shadow: 0.516vh 0.516vh 0 #004582;
    padding: 3.096vh 3.612vh;
    margin: 1.464vh;
    font-size: 6.192vh;
    cursor: pointer;
}

.dlmacos {
    text-decoration: none;
    background-image: linear-gradient(#a8b0bd, #7f8793);
    width: 42.2797vh;
    color: #fefefe;
    border: none;
    border-radius: 2.57998vh;
    text-shadow: 0.516vh 0.516vh 0 #646672;
    padding: 3.096vh 3.612vh;
    margin: 1.464vh;
    font-size: 6.192vh;
    cursor: pointer;
}

.dllinux {
    text-decoration: none;
    background-image: linear-gradient(#f3aa3d, #e88d1c);
    width: 42.2797vh;
    color: #ffdb9e;
    border: none;
    border-radius: 2.57998vh;
    text-shadow: 0.516vh 0.516vh 0 #77351a;
    padding: 3.096vh 3.612vh;
    margin: 1.464vh;
    font-size: 6.192vh;
    cursor: pointer;
}

我不确定 - 这似乎是一个需要更少文本的更简单的过程。这会对我网站的性能产生任何影响吗？我为什么或为什么不应该这样做？

我认为我不应该为标签做这样的事情，但类似乎没问题。

Answer 1

就“运行时效率”而言，两者应该是一样的。

就“清晰度”而言，我喜欢将“公共(public)元素”分组在单个标签下的想法。

重要的是使您的样式表尽可能精简。 UNCSS 是一个有用的工具:

• https://github.com/uncss/uncss

• https://uncss-online.com/