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

【问题标题】：Using CSS framework with semantic markup使用带有语义标记的 CSS 框架
【发布时间】：2019-01-20 21:18:23
【问题描述】：

我希望有某种 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，但我愿意从那里学习任何东西。

【问题讨论】：

很难知道你在找什么，但是在 sass 中使用 extend 可能会导致大的规则集。用 sass 写小文件肯定是可能的。延伸短弧度：sitepoint.com/sass-extend-nobody-told-you

标签： html css sass css-frameworks

【解决方案1】：

在对这个问题进行了相当多的研究之后，我认为目前没有明智的方法来使用带有语义标记的 CSS 框架而不会招致重大损失。我选择使用自定义 CSS 进行最终构建。一些一般性说明：

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

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

【讨论】：