框架无关的设计系统：Web Components 的实用方法

A quick note before we get into things: this is a practical guide that covers managing, building and packaging design system components. It’s impossible to go into thorough detail at every step of the way without this becoming a full course. Some basic knowledge is assumed:

在深入探讨之前简单说明一下：这是一份涵盖设计系统组件管理、构建和打包的实用指南。如果不让它变成一门完整的课程，就不可能在每一步都进行详尽的细节讲解。这里假设你具备一些基础知识：

A basic working knowledge of HTML and CSS
具备 HTML 和 CSS 的基本实用知识
A basic grasp of web components
基本掌握 Web Components
A working installation of Node.js and npm
已正常安装的 Node.js 和 npm
Ability to navigate a terminal well enough to install some packages
能够熟练地操作终端以安装一些包
Basic knowledge of config files and JSON
配置文件和 JSON 的基础知识
Grasping the revolutionary notion that a <button> is not a <div>
理解一个革命性的概念，即 <button> 不是 <div>

Finally, this is a pretty long post. Treat every h2 as an invitation to go make a brew and touch some grass.

最后，这是一篇相当长的文章。把每一个 h2 当作去泡杯茶、出去接触一下大自然的邀请吧。

Okayyyyylet’sgo.

好嘞我们开始吧。

Framework-agnostic components

框架无关组件

Of all the recent hypes/bubbles/whatever you want to call them in tech, the one that excited and confounded me in equal parts was the design systems boom. The overarching concept is clearly fantastic, and almost every team or project can benefit from some form of centralised home for design decisions to live. Like every other boom though, it spawned a lot of weirdness. People converged on certain ways of seeing design in ‘the age of design systems’, Atomic Design slides appearing in every conference talk became a meme, and people made design tokens their entire personality.

在科技界最近所有的炒作/泡沫/或者你想怎么称呼它们的现象中，让我既兴奋又困惑的莫过于设计系统的繁荣。其总体概念显然是极好的，几乎每个团队或项目都能从某种形式的集中式设计决策归宿中受益。然而，就像其他每一次繁荣一样，它也催生了许多怪异现象。在“设计系统时代”，人们对看待设计的某些方式趋之若鹜，每次技术大会演讲中都会出现的 Atomic Design 幻灯片成了一个梗，人们甚至把 design tokens 当成了自己的全部个性。

This isn’t a post about all the weirdness, but we do need to ground this in something a bit more solid than cool technology is cool. As such, one of my least favourite weirdnesses from Design System Weirdness 101 is quite niche, b...