Tuesday, October 13, 2026 13:11

这几天重构博客的一些经验总结：

字号、行高、颜色等控制真正的内容的 utility class 直接加在对应元素上。这些 class 一般是可以继承的，但是他们反而不能依赖继承，应该写在叶子元素上。

Padding、gap、space 等 utility class 加在容器元素上，布局控制应该交给容器，而不是被控制元素自己控制自己。margin 系列 class 因为能够影响自身元素以外的布局，没有局部性质，对于组件或模板片段非常不友好。

元素的实际大小（即 border box）应该尽可能与视觉的大小一致，有利于布局的可预测性。如果是一个简单的文字，尽量不要有额外的 padding，如果作为 UI 文本用途甚至尽量不要有行高。如果有不同的背景色，大小就应该是这个色块的大小。

模板片段既可以作为组件，也可以是纯粹的内容，两种功能最好明确区分。作为组件的需要控制好自己的内部布局和展示，如一个菜单栏。作为内容的则不必设置样式，如字号、前景色等，因为这种内容是和其他内容拼接的，样式取决于上下文，这种例子有文字常量、图标、日期时间。

使用像 Go Template 这样模板引擎时，应该把不是纯内容的模板片段做成有隔离性和局部性的组件，即片段内就有且仅有一个顶层元素，防止片段使用的上下文的布局干扰片段内的布局。使用模板继承时，子模板可以扩展的块应该当作内容，模板定义处应该用单独一个元素包裹扩展点，防止块内布局影响外部。

Go Template 的一个坏处是允许 with 和 range 块隐式绑定表达式，在块内直接用 .Yyy 而不是 $xxx.Yyy 来引用。我选择显式绑定一个变量。