13、前端开发：从设计系统到框架应用

前端开发：从设计系统到框架应用

1. 设计系统

设计系统是一组预定义的 HTML 组件，搭配已应用的 CSS 规则，涵盖产品的颜色方案到内容布局类的定义。有了设计系统，开发者可以专注于软件的构建，无需担心样式定义、元素定位、复杂 CSS 规则编写和过渡动画创建。

如果没有足够资源和耐心创建自己的设计系统，可以使用现有的，例如：
- Bootstrap ：开源免费的框架，具备构建界面所需的一切，官网为 https://getbootstrap.com/ 。
- Foundation ：官网为 https://foundation.zurb.com/ 。
- Material design ：由 Google 开发，官网为 https://material.io/design/ 。

这些系统的理念是让开发者专注于产品开发，工具应帮助他们快速友好地实现所需视觉效果。但如果使用工具困难，不如自己编写 CSS 代码，工具是为了减少开发时间而非增加。

2. 预处理器和模板引擎

编写 HTML 和 CSS 代码并不复杂，但易产生难以维护的大量代码。开发者遵循 DRY（Don’t Repeat Yourself）和 KISS（Keep It Simple Stupid）原则，创造了 HTML 预处理器和模板引擎，这些语言通过提供代码复用和减少代码量来缩短开发时间，编写后需用转译器将代码转换为 HTML 和 CSS。

常见的 HTML 预处理器和模板引擎有：
- H