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

Posted 2023-03-05

【中文标题】有没有办法让 HTML 代码独立于 CSS 类名的变化？

【英文标题】：Is there a way make HTML code independent from changes in CSS class names?

【发布时间】：2016-05-16 13:13:01

【问题描述】：

我使用Twitter Bootstrap 3 有一段时间了，但现在 Twitter Bootstrap 4 来了。还有新的Twitter Booststrapcomes with some changes，例如将.table-condensed 重命名为.table-sm。为了将来可能从当前版本迁移到未来版本，有没有办法使 html 代码独立于 CSS 类名的更改？ 例如，如果我有.table-condensed 类，有没有办法创建我自己的类table-small 并从现有Twitter Bootstrap 的类table-condensed 创建它？类似（伪代码）：

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

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

【问题讨论】：

@cvrebert：我注意到您将 [bootstrap-4] 标签添加到带有 [twitter-bootstrap-4] 的问题中。您是否有理由不删除后一个标签？我们不需要为同一件事使用多个标签。这个在meta上讨论过了吗？

“”不，因为 CSS 在设计上与文档语言耦合。如果不了解文档结构，选择器将无法工作。如果你不告诉它，你就不能指望 CSS 准确地知道要设置哪个元素的样式。

【参考方案1】：

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

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

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

编辑

阅读SASS docs，似乎功能已更改为使用逗号语法。所以这将是您未来的最佳选择。

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

【讨论】：

Less css 不会将选中的类复制到新的类中^^

@edit，那么使用 scss(sass) 确实是个好主意，因为 bootstrap 4 也使用 scss。

【参考方案2】：

您可以使用较少的 css 并执行以下操作：

.table-small 
    &:extend(.table-condensed);

这不会像 sass 那样复制类，而只是添加选择器：

生成的css：

.table-condensed,
.table-small 
    background: red;

预处理器在线：http://lesscss.org/less-preview/