为什么你要在 CSS 中这样做？

而“这样做”通常指的是某种 CSS 实验，通常是复杂的绘图或交互。

例如，您是否见过 Lynn Fisher 非凡的 A Single Div 项目？ 这些图形不仅全部用 HTML 和 CSS 绘制，而且全部用（您猜对了）单个 <div> 创建。

她为什么要这样做？ 这里有一个相关的可能性：这与我们无关。 我们可以自由地思考，甚至可以询问是否做得足够尊重。 但这真的重要吗？ 我们不要假设她不知道自己在做什么，假设这是一种扭曲的痛苦形式，或者她不知道其他技术。 请查看她用 CSS 和单个 div 绘制官方 SVG 徽标的示例。 觉醒。

我甚至有点理解。 我写了一整本书关于 SVG，因为我认为它被低估了。 我认为哪些“CSS 绘图”在生产网站（旨在持续使用）中应该更好地使用 SVG 吗？ 当然。

那这个呢？

我的天啊，真是太不可思议了。 一眼看上去我猜到是 GreenSock 在幕后操作。 说到，GreenSock 在 CSS-Tricks 上 推荐了一些智能动画技术。 这其中的一部分是将动画分解为各个部分，并将它们拼接在一起形成更大的时间轴，以便于维护，“而不会陷入过程的泥潭”。

那么，Julia Muzafarova 做错了吗？ 当然没有。 如果在这个世界上有一种错误的方式来为骑自行车的卡通潮人制作动画，我再也不想生活在这里了。 它包含 2100 行精细的定位、着色和动画。 哎呀，如果你真的需要抓住一些“实用”的东西，它甚至可以在一些电子邮件客户端中工作。

Level Studios 的 UI 开发人员 Sasha Tran 去年 分享了她 在 CSS 中创建绘图的故事。 在 Codevember 期间，她连续 20 天每天都画一些新东西。

即使我不擅长手工插图，也有一种通过其他媒介表达自己的方式。 我发现 HTML 和 CSS 是这种媒介。 为了提升水平并达到能够创建可爱作品的程度，我专注于两件事：基础和一致性。 随着时间的推移，使用基本 CSS 形状（如矩形）以及诸如边框半径等基本属性，让我有了进步到更复杂的插图的肌肉记忆。

在一个月内显著提升，并发展出更好的 CSS 肌肉记忆。 嗯，说到形状，在 CSS 中有 很多方法 可以用来处理这些形状！

你可以说，突破边界走向不切实际，正是我们磨练技能以完成所有其他工作的方式。

你可以说，强迫自己进入限制是 创造力 的燃料。

你可以说，在这些强迫条件下，创造性地伸展你的大脑有助于建立你的信心，并扩展你的工具箱。

你可以说，这只是有点好玩。