有没有一种方法可以使HTML代码与CSS类名称的更改无关？

Question

我使用 Twitter Bootstrap 3 已经有一段时间了，但现在 Twitter Bootstrap 4 即将发布。而新的 Twitter Bootstrap 带来了一些变化，比如将 .table-condensed 改名为 .table-sm。为了未来可能从当前版本迁移到未来版本，有没有一种方法可以使 HTML 代码不受 CSS 类名更改的影响呢？例如，如果我有一个 .table-condensed 类，是否有一种方法可以创建自己的类 table-small 并从现有的 Twitter Bootstrap 类 table-condensed 创建它？类似于（伪代码）：

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

迄今为止，我仅使用纯 CSS（我只是一个前端开发人员，而不是全栈开发者：），如果有人能告诉我是否可能以某种方式实现这一点，也许是通过预处理器或类似的东西，我将非常感激 - 预先感谢您！

- Radek Anuszewski

---

@cvrebert：我注意到你在将[bootstrap-4]标签添加到带有[twitter-bootstrap-4]的问题上。你为什么不同时删除后者的标签呢？我们不需要同一事物的多个标签。这个问题在元社区中讨论过吗？ - BoltClock

有没有办法使HTML代码与CSS类名的更改无关？不，因为CSS与文档语言是设计上耦合的。如果没有文档结构的任何知识，选择器将无法工作。如果您不告诉它要样式化哪个元素，就不能指望CSS知道要样式化哪个元素。 - BoltClock

Answer 1

如果您正在使用SASS，则可以使用@extend函数。然而，建议避免这样做，因为它会将选定的类复制到新类中，从而实质上使您的CSS大小加倍。解决方案要么是不升级到BS-4，除非您有要求。要么在升级时更新所有HTML。阅读SASS文档后，似乎功能已更改以使用逗号语法。因此，这将是您未来的最佳选择。它仍会生成多余的CSS，但不像复制所有CSS那样糟糕。

- Ryuu

---

Less css不会将所选类复制到新类中 ^^ - seahorsepip

@编辑，如果Bootstrap 4也使用scss，则使用scss（sass）确实是一个好主意。 - seahorsepip

Answer 2

您可以使用less css并执行以下操作：

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

这不像sass一样复制类，而只是添加选择器:

生成的css:

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

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

- seahorsepip