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

Question

我希望有某种 CSS/样式框架可以使用严格的语义标记并生成相对较小的文件。现在看来，这又是一个“三选二”铁三 Angular 的例子。

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

1. 某种视觉样式框架(因此我不必手写所有内容)

2. ...使用简单的语义 HTML，没有任何类名污染，只是为了视觉样式。这是我愚蠢、固执的意见，但我觉得标记应该始终是稀疏的、简单的和语义的。像这样的东西:

   <div class="widget">
   

   ...不是这个:

   <div class="widget d-flex p-2 bd-highlight">
   

3. ...这导致文件大小相对较小。就其本身而言，框架实际上非常精简。但是为了保持轻量级，它们需要声明性标记。预处理器，如 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)通过 mixin(@include framework-mixin())暴露了一些样式。这会导致规则集重复(因此有些膨胀)，但它比使用 @extend 进行继承时发生的情况要轻得多。但是，许多核心类只是作为常规类公开。这意味着您仍然面临语义标记或大量文件膨胀的问题。

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