html - 有没有办法让 HTML 代码独立于 CSS 类名的变化？

Question

我正在使用 Twitter Bootstrap 3有一段时间，但现在 Twitter Bootstrap 4来了。和新Twitter Booststrap comes with some changes , 比如重命名 .table-condensed至 .table-sm例如。为了将来可能从当前版本迁移到 future 版本，有没有办法使 HTML 代码独立于 CSS 类名的更改？例如，如果我有 .table-condensed类，有没有办法创建我自己的类table-small并从现有的 Twitter Bootstrap 创建它的类(class)table-condensed ？类似于(伪代码):

.table-small {
    join(".table-condensed")
}

我只使用纯 CSS直到这一刻(我偶尔是前端开发人员而不是全栈:))，如果有人会回答我，如果这件事在某种程度上是可能的，也许是预处理器或类似的东西，我将非常感激 - 谢谢你提前!

Answer 1

如果您使用的是 SASS，则可以使用 @extend 函数。

但是，建议避免这样做，因为它会将选定的类复制到新的类中，从而从本质上使 CSS 的大小加倍

解决方案是不升级到 BS-4，除非您有要求。或者在你这样做时更新你所有的 HTML

编辑

通读 SASS docs ，似乎功能已更改为使用逗号语法工作。因此，这将是您今后的最佳选择。

它仍然会通过将类的数量加倍来生成多余的 CSS，但不会像复制所有 CSS 那样糟糕