用 CSS 解决生活问题

或者：当你只有 CSS 锤子时，世界看起来就像一个 CSS 钉子。

每当我听到一个完美友好的评论，比如，“是的，代表科技领域！”作为对 我的纯 CSS 艺术 的回应，我都会感到一阵强烈的恐慌。

像许多靠为生计而做 UI 的人一样，我在将“科技”一词应用于自己时，很难不感到自己是个骗子。 冒名顶替综合征很难消除。 前端专家？ 哦，你是说那些不是真正的代码的东西？ 这让那种感觉从冒名顶替变成了恶棍。

尽管我 90% 的日常工作都围绕着 JavaScript 展开，但我感觉“科技”标签就像一个闪闪发光的奖杯，是我贪婪地从一个更值得拥有它的人那里抢来的。 就好像外面有一些无名、挨饿的计算机科学毕业生，而我却从他们的嘴里抢走了拉面。

以这个场景为例，接受过计算机科学教育的人可能很熟悉它。

CS 课程问题：编写一个脚本，对这个数据集排序，然后随机化 N 次，但对于每个第 8 个 Q，打印 12 个树堆栈队列空翻，并且你没有停止摇摆，直到返回结果的总和 4x + 3y。

我的建议：（12 小时和 8 加仑咖啡之后）完成了！ 这里有 1200 行格式优美的代码！ 有 43 个循环，32 个 if/else 条件，以及 83 行注释，因为我一直在文件中迷路 - 但我取得了完全期望的结果！

CS 课程答案：使用三行递归。

我的回应：…%#@& 你。

这有点夸张，但经常被这样谦虚对你有帮助。 它能帮助你作为一名程序员、问题解决者和人类成长。 此外，它为你将定期遇到有趣挑战的职业生涯中的现实场景做好了准备，这些挑战需要一些创造性思维。

说到 CSS 方面的事情，没有雇主会要求你制作一个详细的绘画式 CSS 艺术作品。 如果他们这样做，你真的应该立即向人力资源部门报告为骚扰。 但确实很常见的是有一个小的，有时是不寻常的要求。 一个可能没有明显的解决方案的要求。

当遇到这样的挑战时，可能不会立即想到“无技术”CSS - 它明显缺乏编程功能。 但不要弄错，它可能是你算法库中最有价值的工具之一！ 例如

CSS 课程问题：当用户点击某个输入字段时，需要弹出一条免责声明消息作为警告。

建议：小菜一碟！ 我们使用我们值得信赖的朋友 JavaScript 来触发输入元素上的单击或焦点事件。 然后，我们加载免责声明模板。 然后，我们发出一个 Ajax 调用以获取内容。 一旦我们的 Promise() 完成，我们就将元素追加到页面，并通过查找 event.target 的父元素来找到插入的位置。 加载完免责声明后，我们需要确保我们已经处理了免责声明本身上的另一个单击事件，以便切换出去。 一旦我们切换出去，我们就销毁该元素。 如果再次单击输入，我们会重复此过程。

CSS 课程解决方案：input:focus + .disclaimer { display: block; }

回应：…%#@& 你滚。

同样，这有点夸张（而且是世界上效率最低的 JavaScript 解决方案），但它只是稍微夸张了一点。 我看到这些类型的提案比你想象的要多得多。 能够为长期以来被认为是冗长的 JavaScript 问题提供极其快速的解决方案？ 这就是 CSS 让我感觉自己是科技大师的方式之一。

这只是我喜欢 CSS 的众多原因之一。 规则集有限正是使它如此有趣的原因。 你不期望CSS 满足你所有的需求，这就是当你最终找到一种方法能够满足需求时，它会让你感到更加有回报的原因。

现在，假设有一个设计挑战。 要求你在浏览器中实现这个形状

建议 1：“没有‘reverse-border-radius’ 属性可以在 CSS 中创建那个形状，所以这是不可能的。 只需嵌入一个图像。 太简单了。”

答案 1：好吧，如果你不想学 CSS 就别学。

不，请回来！ 我希望你学习。

确实，没有人会因为你使用图像而惩罚你。 没有 CSS 警察在执行这条规则。 实际上，甚至没有计算机科学警察阻止你使用糟糕的数十亿行算法来代替一个简单美丽的递归算法。 但如果在 CSS 和 CS 之间存在任何需要共享的概念，那就是“不可能”几乎永远不是答案。

所以，让我们尝试一个蛮力方法，好吗？

建议 2：从一个黑色矩形开始，然后用两个与白色背景色匹配的带圆角的 <div> 元素切出侧面，如下所示

答案 2：好了！ 现在我们开始接近了。 形状正在成形。 但是，如果背景在变化会怎样？ 或者渐变？ 或者图像？ 那会是什么样子？

嗯。 看起来不再那么好看了。 那么我们如何让我们的自然背景显露出来，同时仍然保持倾斜向内的形状 - CSS 本身不支持的形状？

建议 3：保留矩形。 保留弯曲的 div。 但不要用颜色填充矩形，也不要用颜色填充弯曲的 div。 相反，使用 box-shadow 将黑色颜色扩展到弯曲的 div 的外部。 矩形只需要一个 overflow: hidden; 来将该 box-shadow 颜色包含在其边界内。

答案 3：做得好！ 太美了！

上述技术在 Ana Tudor 的 关于圆角的优秀文章 中有更详细的描述。 当遇到“用 CSS 不可能”的问题时，这是一个需要牢记的优秀概念。 这是我创建艺术时喜欢使用的一种方法。

例如，这是我的一幅 CSS 绘画的一部分

不幸的是，人的脖子通常不会以一个完美的矩形形状方便地包装。 但 HTML 可以，所以我们只能用它。

但是等等，那个脖子形状是不是和我们上面概述的弯曲的黑色形状很相似？

是的，它都是从一个大矩形开始的。 在这种情况下，我们向外弯曲的 div 在它们的盒阴影上使用了更柔和的混合。

在工作之外，我总是回到 CSS，寻求艺术灵感。

因为那些限制对我来说有一种吸引力。 我知道当我说严格的限制是创造力的最佳催化剂时，我并不孤单。 完全的艺术自由可能是一个令人瘫痪的概念。

编程有时也会出现这种情况。 如果你拥有世界上最强大的编程语言，那么你应该能够毫不费力地解决任何编程问题，这似乎是自然的。 拥有所有这些提供无数解决方案来解决同一个问题的奇妙工具，难怪我们有时会因为信息过载而陷入僵局。

当然，CSS 可以被认为不是技术堆栈的“真正”组成部分。 我甚至不会反驳这一点。 面对现实吧，纯 CSS 与递归、数据存储或数据库查询无关。 它的主要目的是美化 - 这并不能消除前端开发人员不是“真正”的技术人员或程序员的耻辱。

CSS 从未做出过任何大胆的声明或承诺。 它只是提供了帮助，事实证明，它的帮助简直是英雄般的。

如果你是一名前端开发人员，不得不忍受一群 DevOps 人员嘲笑他们的 CSS，那就等着看当你偷偷地在生产环境中添加一个 body { display: none; } 时，他们的反应吧。 到时候看看是谁在笑！^*

---

^* 他们仍然会嘲笑你，因为你会被解雇。 请不要这样做。