一、开始使用 SLDS
本单元介绍 Salesforce Lightning Design System：什么是设计系统、SLDS 的四大基础（设计令牌、组件、蓝图、指南），以及 Lightning Web Components 如何在代码中实现 SLDS。
学完本单元，你将能够：解释什么是设计系统、阐明 SLDS 的用途、识别构成 SLDS 的四个主要元素。
SLDS 的四大基础（The Four Fundamentals of SLDS）
设计系统是可重复设计模式与可复用代码（即组件）的集合。设计系统像积木一样，帮助设计师与开发者以更便宜、更快、更好的方式构建不同的体验，而无需每个新项目都从零开始。一个好的设计系统是可扩展、高效、视觉一致、共享的。Salesforce Lightning Design System（SLDS）包含创建与 Salesforce 用户体验原则、设计语言与最佳实践一致的用户界面的资源——开发者可以专注于应用逻辑，设计师专注于用户体验、交互与流程。SLDS 是一个"活"的设计系统：开源，并随 Salesforce 平台每次发布获得 UI 更新。SLDS 的突出特点是实现无关（implementation-agnostic）——你无需采用特定框架即可使用，几乎任何技术栈都行（LWC、Aura、Visualforce 等）。
SLDS 1 由四个基础元素构成：设计令牌（Design Tokens）——设计系统的"心脏与灵魂"，是把颜色或文本属性赋给可复用变量的原子元素，用令牌代替硬编码值来保持可扩展、一致的视觉系统（LWC 中写 --lwc-brandAccessible、Aura 中写 t(brandAccessible)、Sass 中写 $brand-accessible）。更新一个令牌值即可自动更新所有引用它的组件。
实用工具（Utilities）——处理特定、单次使用场景的特殊 CSS 类，例如网格工具提供一组类快速创建响应式、自适应、移动优先的布局。
设计指南（Design Guidelines）——通过常见交互模式指导用户体验的原则与最佳实践，围绕 UI 模式、行为、标记、样式、语气语调与无障碍提供大量指导。
组件蓝图（Component Blueprints）——构建组件与体验的健壮 UI 元素集，是一组语义化 HTML、CSS、无障碍属性与指南，是 SLDS 实现无关的关键。你可以用蓝图在任何 Web 技术中构建组件（如 React），也可用现成实现之一——Lightning Components。
Lightning Components 是构成现代 Lightning Experience 用户界面的构建块，Salesforce 提供常用组件库（Base Lightning Components）。只需自建三类东西：Salesforce 尚未构建为 LWC 的、用蓝图可组合的自定义组件、用设计令牌作 CSS 值的全新组件。Lightning Web Components（LWC） 是 base components 的下一次演进，基于现代 Web 标准、由现代浏览器原生支持；自建组件时始终优先选 LWC——它们继承全局 HTML 属性与事件，比 Aura 更功能化、更高性能。
二、用组件构建
本单元动手实践：探索 SLDS 布局与网格系统、使用 Lightning Web Components、用 styling hooks 自定义组件，并用现有 SLDS 构建块组合自己的组件。
布局、网格与组件组合（Layouts, Grids, and Component Composition）
布局与网格：SLDS 1 网格系统是一个 CSS 框架（基于 CSS Flexbox），提供灵活、移动优先、设备无关的布局系统。"移动优先"指先以最小视口构建界面，再在特定断点向上扩展。SLDS 用 small/medium/large 关键字指定响应式断点：.slds-size（默认，mobile）、.slds-small-size（≥480px，mobile/tablet）、.slds-medium-size（≥768px，tablet/desktop）、.slds-large-size（≥1024px，desktop）。网格至少由两个结构元素组成：网格容器（slds-grid 类）与其子元素（slds-col）。SLDS 1 网格可划分为 12 列，但类名可约分（如"八分之十二"等价于"四分之三"）。网格还支持响应式列重排、嵌套、替代布局、从右到左、自上而下/自下而上、对齐修饰符等。
蓝图、组件与 LWC：牢记规则——构建新组件时要刻意（intentional）。决策顺序：1) 先用组件库中现有的 LWC 组件；2) 若没有 base 组件能恰当定制，再从蓝图创建新组件。使用现有组件的一大原因是我们已把无障碍内置到组件中；蓝图虽提供良好的无障碍建议，但仍需额外开发才能完全无障碍。
使用 Lightning Web Components：LWC 是最简单的方式，用按钮、表单输入、开关等交互式 UX 组件把布局变得生动——直接复制粘贴在线文档的代码即可。例如在主区域渲染 <lightning-tabset>、在侧边栏渲染 <lightning-card>。
用 Styling Hooks 自定义组件：styling hooks 用 CSS 自定义属性，让你轻松自定义组件样式、表达品牌。在 LWC 与 SLDS 的世界里，styling hooks 以优雅、受支持的方式为某些 Lightning Components 提供定制能力。例如普通按钮（无 styling hooks）渲染为蓝底白字；SLDS 样式按钮（.slds-button）用 styling hooks 定义可修改的属性，通过添加自定义类定义新值，给按钮自定义紫色背景表达品牌。
组合自己的组件：当在 Base Components 库中找不到所需界面项（即便考虑了定制选项）时，就该组合自己的组件了。推荐示例：观看 Dreamforce 2019 的"Building Custom UI Components"演讲（基于 Scoped Notification 蓝图的自定义组件），以及 Welcome Mat 组件（用网格、进度条、media objects、图标等蓝图组合而成，含多个变体示例与完整代码文档）。记住规则：构建新组件时要刻意。
三、理解 SLDS 最佳实践
本单元涵盖区分 SLDS 专家与新手的三个基本最佳实践：定制而非覆盖、刻意使用设计令牌、更聪明地写样式，以及常见故障排查技巧。
SLDS 专业开发的三条最佳实践
#1 定制而非覆盖（Customize Instead of Overriding）：当你需要更改 SLDS 的颜色、布局、间距时，小心不要编写取消 SLDS 样式的自定义 CSS——换句话说，避免添加覆盖系统的一次性方案。
注意：如果编写的自定义 CSS 取消了 Lightning Design System 的样式，那就是在覆盖而非定制。正确做法是把样式抽象到新的选择器（自定义类）中，而不是直接覆盖 .slds-* 类本身。尽量让设计系统保持干净、原始的状态——这意味更少的一次性代码、更少的技术债务。
#2 刻意使用设计令牌（Be Deliberate with Design Tokens）：使用设计令牌时，确保令牌满足该组件属性与作用域的需求，注意令牌的作用域，避免使用其他组件的令牌。
例如：一个需要 margin 的卡片组件，若误用了名为 button-spacing（前缀 button 表示作用于按钮）的令牌，当该令牌值变化时会产生意外回归；正确做法是用未限定于其他组件的原始间距令牌 spacing medium。注意：设计令牌仅用于 SLDS 1——SLDS 2 用 styling hooks（CSS 自定义属性）而非设计令牌。
#3 更聪明地写样式（Style Smarter, Not Harder）：CSS 本身就难，在大型演进系统中写样式更容易出问题。遵循几条核心样式技巧：实践良好 CSS 卫生——不要用带类的类型选择器（如 h1.className { }，会提高特异性并造成对标记的依赖）；避免长嵌套选择器（特异性问题的红旗）；避免通用选择器 *（范围过宽、不可预测）；不要把 !important 当锤子用（若作为最后手段，需诊断原因）。
故障排查：当界面出现意外差异时，用浏览器的 Inspector 检查代码：1) 查找 SLDS 类（都以 .slds- 前缀开头）；2) 检查 CSS 覆盖（任何无 SLDS 前缀的类，或开发者用 .their-class .slds-button { new value } 覆盖前缀的）；3) 若有覆盖，逐个关闭看组件 UI 是否变化；4) 若问题不在 SLDS（开发者构建了定制内容），确认他们用的是正确令牌。若仍有问题，可通过 GitHub（提交代码问题）、Salesforce UX 社交媒体账号（提供 SLDS 反馈）、Design Trailblazers Community（提问并与 Salesforce 设计师交流）联系设计系统团队。
文章来源：Trailhead - Lightning Design System Development for Designers