Question

我希望有某种CSS /样式框架可与严格的语义标记一起使用，并导致文件相对较小。我现在所看到的方式，这是“三个选项，选择两个”铁三角的另一个示例。

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

某种视觉样式框架（因此我不必手工编写所有内容）
...可以与简单的语义HTML一起使用，而不会因为视觉样式而污染任何类名。这是我愚蠢，固执的看法，但我认为标记应始终是稀疏，简单和语义化的。这样的东西：
```
<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）通过mixins（@include framework-mixin()）公开了一些样式。这会导致规则集重复（并因此而有些膨胀），但是它比使用@extend进行继承时要轻得多。但是，许多核心类只是作为常规类公开。这意味着您仍然面临语义标记或大量文件膨胀的问题。

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

将CSS框架与语义标记一起使用

1 个答案: