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

Question

我希望有某种 CSS/styling 框架可以使用严格的语义标记并生成相对较小的文件。现在看来，这又是一个"three options, pick two"铁三角的例子。

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

某种视觉样式框架（所以我不必手写所有东西）
...与简单的语义 HTML 一起工作，没有任何 class 名称污染，只是为了视觉样式。这是我愚蠢、固执的意见，但我觉得标记应该始终是稀疏的、简单的和语义的。像这样的东西：
```
<div class="widget">
```
...不是这个：
```
<div class="widget d-flex p-2 bd-highlight">
```
...这导致文件大小相对较小。就其本身而言，框架实际上非常精简。但是为了保持轻量级，它们需要声明性标记。预处理器，如 Sass，允许您直接从框架中 inherit rulesets 非常非常容易。所以你可以这样做：
```
.widget {
    @extend .d-flex;
    @extend .p-2;
    @extend .bd-highlight;
}
```
但它会很快导致 绝对巨大的 文件大小。规则集仍然很小，但选择器列表呈爆炸式增长。仅仅因为这个文件大小问题，我会断然拒绝这个解决方案。

我的直觉告诉我，我的选择要么是继续手写 CSS（放弃 #1），要么开始在我的 html 中声明样式（放弃 #2）。

有人知道解决这个问题的方法吗？我在滥用 Sass 吗？还有我不知道的另一种框架吗？我正在使用 Sass 和 React，但我愿意从那里学习任何东西。

Answer 1

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

某些框架（特别是 Bootstrap）通过混入 (@include framework-mixin()) 暴露了一些样式。这会导致规则集重复（因此有些膨胀），但它比使用 @extend 进行继承时发生的情况要轻得多。然而，许多核心类只是暴露为常规类。这意味着您仍然面临语义标记或大量文件膨胀的问题。

似乎大多数现代框架都将其代码库组织成可继承的块。如果您非常小心地 @extend 仅类您需要的确切类，您最终可以得到（可以说）可接受的最终 HTML 文件大小。与其包含整个框架 css 文件，不如考虑仅包含您需要的组件文件。我仍然发现即使这些文件也很容易变得太大，但如果你小心，它可能会起作用。

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

Using CSS framework with semantic markup

html

css

sass

css-frameworks