[译] Composition in CSS

原作信息

地址：Composition in CSS
发布时间：2025/09/08
作者：Zell Liew

Tailwind 和一些工具库，一直推动「组合」理念，但依我看，它们的「组合」未免太过天真。

像这种一条一条添加 class......

html 复制代码

<div class="p-4 border-2 border-blue-500"> ... </div>

和这种直接写 CSS 的有什么区别？

css 复制代码

/* 这不也是组合嘛 */
.card {
  padding: 1rem; 
  border: 2px solid var(---color-blue-500)
}

不过有一说一，自从用了 Tailwind 对组合概念也想得多了。我整理了一些思考笔记。

自古有之

CSS 天然能组合，这一特性内置在了层叠机制。比方，决定用这些属性，设置按钮样式。

css 复制代码

.button {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles... */
}

随时能添加别的 class 改变按钮的外观：

html 复制代码

<button class="button primary"> ... </button>
<button class="button secondary"> ... </button>

css 复制代码

.primary { background: orange; }
.secondary { background: pink; }

甚至能添加 .button class 将其他元素改为按钮外观：

html 复制代码

<a href="#" class="button"> ... </a>

这两种情况都在发生组合：

.button 加给 a 元素上
.red 组合到 .button 上

因此，CSS 组合机制自古有之。因为是语言天然的特性，所以我们习以为常。

对「组合」的理解片面

有的人提到 CSS 的组合，只能想到 HTML 中添加 class。

html 复制代码

<div class="one two"> ... </div>

用 Sass 混合器或高级 Tailwind 工具的时候，又几乎没人探讨过 CSS 文件中的组合问题。

在这些时候，其实也在组合样式......没在 HTML 里操作而已。

css 复制代码

@mixin button () {
  display: inline-flex;
  padding: 0.75em 1.5em; 
  /* other styles ... */
}

.button {
  @include button; 
}

Composition 组合，可能源于两个词根:

Compose 组成: 将多个部分或元素放在一起形成整体；拼接或拼凑不同的部分以创建完整的物体或概念
Composite 合成: 由不同部分或元素构成

这两个词都源自同一个拉丁词根 "componere"，其含义为「排列」或「指挥」。

也就是说......所有工作都以某种方式被组织起来，因此所有工作都是被组合而成的。于是我在想，为何「组合」概念在编程语境中被运用得如此局限？🤔

译者注

词根这段儿可能理解有误，还请指正。

接着看......

组合不是压缩

组合 class 只在用工具类的情况下才能 CSS 瘦身。然而，组合工具类可能导致 HTML 膨胀。

html 复制代码

<div class="utility composition">...</div>
<div class="one utility at a time">...</div>
<div class="may create html bloat">...</div>

另一方面，组合选择器的 class 可能不会减轻 CSS，但确实能减少 HTML 膨胀。

html 复制代码

<div class="class composition">...</div>
<div class="card primary">...</div>
<div class="may override properties">...</div>
<div class="less html bloat"> ... </div>

孰好孰坏？¯(ツ)/¯

HTML 和 CSS 膨胀可能是最不用担心的问题

众所周知：

HTML 能包含大量内容且对性能影响甚微。
CSS：俺也一样。
500 行的 CSS 大小约 12kb ~ 15kb (根据 Claude 数据)。
一张图片大小通常 150kb 起步。

想要项目变苗条，与其纠结 CSS 的写法，还不如优化图片的用法。

想重构 CSS 提升性能，加载时间也就缩短 2 毫秒；要是为了提升可读性那必须支持。

我认为：

HTML 和 CSS 的冗余部分其实不重要。
重点要放在架构设置、代码结构和清晰度上。

高级组合

站在高处，就会发现，所有内容都可归为四大类：

布局：关乎物品在页面摆放
文字：字体相关
主题：颜色相关
特效：渐变、阴影等好看的

这四类样式互不影响。比方:

font-weight 只属于文字一类
colour 只属于主题一类

按类创建可组合的 class 才合理的------将这些 class 组合搭配，生成最终成品。

假设你对这四个类进行了 class 组合，HTML 可能是这样：

html 复制代码

<!-- 假装写些 class，发挥你的想象力吧！ -->
<div class="layout-1 layout-2 effects-1">
  <h2 class="typography-1 theming-1"> ... </div>
  <div class="typography-2"> ... </div>
</div>

这就是典型的例子，用 Splendid Styles 和 Splendid Layouts 的 class：

html 复制代码

<div class="card vertical elevation-3">
  <h2 class="inter-title"> ... </h2>
  <div class="prose"> ... </div>
</div>

我将进一步阐述这四个类别体系，以及我在最新作品 Unorthodox Tailwind 中是如何创建可组合类别的。感兴趣的话，来瞧一瞧！

总结

概括:

CSS 天然能组合。
有些开发人员对于 CSS 的「组合」理解片面。
能在 HTML 或 CSS 里组合操作。
样式分四类：布局、文字、主题和特效。

最后：Splendid Styles 包含了能够辅助这四个类别中的每一种进行设计的 class。Splendid Layouts 则负责处理布局部分。而且我在课程中 Unorthodox Tailwind 还会详细介绍我是如何创建可组合类的。