Html 使用带有语义标记的CSS框架

我希望有某种CSS/样式框架能够与严格的语义标记一起工作，并生成相对较小的文件。从我现在的角度来看，这是“三选二”铁三角的另一个例子

这就是我的意思。我正在寻找：

某种视觉样式框架（因此我不必手工编写所有内容）

…它可以使用简单的语义HTML，而不受任何类名污染，只是为了视觉样式。这是我愚蠢而固执的观点，但我觉得标记应该始终是稀疏的、简单的和语义的。像这样的东西：

<div class="widget">

但它很快就会导致绝对巨大的文件大小。规则集仍然很小，但选择器列表会爆炸。我会断然拒绝这个解决方案，只是因为这个文件大小的问题

我的直觉告诉我，我的选择要么继续手工编写CSS（删除1），要么开始在html中声明样式（删除2）

---

有人知道一条出路吗？我是不是在胡说八道？还有其他类型的框架我不知道吗？我正在与Sass和React合作，但我愿意从任何事情中学习

在对这个问题进行了深入研究之后，我认为目前没有一种明智的方法可以使用带有语义标记的CSS框架而不招致重大处罚。我选择使用定制CSS进行最终构建。一些一般性说明：

某些框架（特别是引导）通过mixin（

@include framework-mixin（）

）公开一些样式。这会导致规则集的重复（从而导致一些膨胀），但这比使用

@extend

进行继承要轻得多。然而，许多核心类只是作为常规类公开。这意味着您仍然面临语义标记或大量文件膨胀的问题

---

似乎大多数现代框架都将其代码库组织成可继承的块。如果您非常小心地

@仅扩展所需的确切类，那么最终的HTML文件大小（可以说）是可以接受的。而不是包括整个框架CSS文件，考虑只包括所需的组件文件。我仍然发现，即使是这些文件也很容易变得太大，但如果您小心，它可能会起作用。
很难知道您在寻找什么，但在sass中使用extend可能会导致规则集变大。当然，可以用sass编写小文件。扩展上的短rad：
<div class="widget d-flex p-2 bd-highlight">

.widget {
    @extend .d-flex;
    @extend .p-2;
    @extend .bd-highlight;
}