站点主题入门：视觉体系与可维护性

站点主题不只是外观皮肤，它是一套贯穿全站的视觉决策集合：颜色如何分级、字号如何成阶梯、间距如何统一、组件在不同状态下如何表现。主题做得好，后续新增页面能直接复用规则；主题做得随意，每加一个页面就要重新调一遍样式。

建立设计变量而不是散落数值
把颜色、字号、行高、圆角、阴影、间距抽成一组可复用的变量，页面样式只引用变量，不写死具体数值。这样换风格时只改变量，不必逐页搜索替换。变量命名要表达用途而非外观，例如用“主色”“警示色”“辅助文字色”这类语义名，避免用“浅蓝”“深灰”，否则换色后名字与含义脱节。变量数量保持克制，过多会让选择困难，过少则无法覆盖状态差异。

组件规范与状态覆盖
把按钮、输入框、卡片、标签、提示条这些高频元素定义为组件，每个组件明确默认、悬停、按下、禁用、加载五种状态的表现。状态缺失是主题最常见的隐患：禁用按钮看起来仍可点击，加载中没有任何反馈，用户就会重复操作。组件之间的间距规则也要统一，用一套间距阶梯控制，比逐个写边距更稳定。

响应式与可访问性
布局按断点调整，而不是为每个设备写一套样式。窄屏优先保证内容可读与操作可点，导航折叠、侧栏下沉、表格横向滚动是常见处理方式。可访问性方面，正文与背景的对比度要足够，交互元素要有清晰的聚焦样式，图片要有替代文本，动画要尊重减少动态效果的偏好。这些不是加分项，而是可用性的底线。

落地步骤与验收
先定变量与组件规范，再搭两三个代表性页面验证规则是否够用；然后批量套用到其余页面，逐页检查溢出、错位、对比度；最后做一轮窄屏与键盘操作测试。验收时用检查表逐项打勾：颜色是否全部来自变量、状态是否齐全、间距是否统一、聚焦是否可见、窄屏是否可操作。

长期维护建议
把主题规则写成简短的内部说明，注明变量含义与组件用法，新成员按说明扩展页面即可保持一致。改动集中在变量层与组件层，避免在具体页面写一次性样式。定期清理不再使用的变量与组件，防止主题随时间膨胀。视觉体系的价值在于约束，约束越清晰，后续扩展越轻松。