我记得坐在我们家斯巴鲁旅行车的后座上。我那时六岁,还没有儿童安全座椅。我爸爸开车,我妈妈在我们开车去某个我记不清的度假地点时,和我玩二十个问题游戏。

轮到我妈妈了,她和我在玩二十个问题游戏。她心里想着一件东西,我负责问问题。
“它很大吗?” 我问道。
“相对于什么?” 我妈妈回答道。
整个游戏都是这个模式。我问一个问题,我妈妈就用一个关于相对性的问题来回答。
“轮到你想东西的时候,你可以问问题。” 我说道。
“如果你问的是这个东西是否和一座山一样大,答案是否定的。但与一只蚂蚁相比,它是很大的。”
今年,我一直在重新学习相对思考的意义。有多长时间?我想也是相对的。但随着2020年的结束,我几乎能听到我妈妈问我同样的问题,无论是在工作中还是在个人生活中。
“相对于什么?” 她问道。
听到“相对”这个词,我的脑海里就跳出了 **CSS 中的相对单位**。我相信你们中的许多人也是这样。在工作中,我总是使用 em
、rem
和 %
等单位。刚开始学习这些单位时,我使用它们只是为了炫耀(无论何时学习的)。我甚至不知道 em
和 rem
之间有什么真正的区别。我以为它们与视网膜屏幕有关。
当然,那是很久以前的事了。(有多久?相对而言。)我现在知道相对单位是 **相对于它们所引用的东西**。2rem
在根字体大小为 16px
的网站上会以一种方式计算,而在根字体大小为 24px
的网站上则会以另一种方式计算。百分比也是如此。400px
容器内的 50%
与 1200px
容器内的 50%
的含义不同。
所以现在,当我发现自己要给元素分配尺寸值时,我会先和妈妈进行一段小小的对话。
“这个元素是 5.25em
。”
“相对于什么?” 她问道。
我还发现,**相对思考需要一点视角**。而且,不,这与 CSS perspective
无关(虽然我可能会尝试建立这种联系)。以相对的方式思考意味着暂时跳出自己的鞋子,从其他事物的角度来看待事物。
我说“其他事物”,因为我认为这种思考方式在编写代码时最为重要。每当我处理组件的各个部分时,我必须注意它们所处的上下文(或视角)。为什么?因为这些部分在不同的上下文中意味着不同的事物,而这些上下文相对于包含它们的组件而言是相对的。
什么时候一个 <h2>
只是一个 <h2>
?很少。它可能是帖子名称。或者可能是小部件的标题。也许它是卡片组件的标题。作为前端开发者,我们根据组件的视角来命名这些东西。从帖子的角度来看,一个 <h2>
的意义(可能看起来)与卡片的视角不同。
.post {}
.post__title {}
.widget {}
.widget__title {}
.card {}
.card__title {}
给事物命名很难。 我经常发现自己想,“啊!我应该怎么称呼这个东西?”
“相对于什么?” 我妈妈插嘴道。
我可以继续说下去。事实是,以相对性的方式思考对于我们编写的代码来说与它对二十个问题游戏或我们的个人生活一样重要。在这样一个我们被许多相互竞争的力量颠覆的一年里,以这种方式思考可以为我们许多人提供慰藉和智慧,在压力和沮丧之中——当然,是相对的。
- “这让我很焦虑。” 相对于什么?
- “我有太多事情要做。” 相对于什么时候?
- “我 JavaScript 很烂。” 相对于谁?
- “我讨厌我现在的工作。” 相对于哪里?
很容易陷入绝对的思维。相对性迫使我们以不同的方式看待事物。
谢谢,你的帖子是所有关于 CSS 的有用帖子中的一个杰作,因为它将一个奇妙的(甚至更有用的)联系带到了生活中。请代我向你妈妈致谢。
读到这篇文章,我感到很清新,Geoff。
真的,不知怎么的,我今天才问自己一个关于工作的问题(我猜是疑问),你妈妈让答案变得如此清晰。
2020 年对我们所有人来说都非常艰难,无论是在个人层面上还是在职业层面上。现在我们已经度过了难关(幸运的是?我不知道),我们都会有一些疑问,一些问题,但你妈妈的智慧一定会帮助到阅读这篇文章的人们(就像我一样)。
“相对于什么?”
你错过了提及
position: relative;
的机会 :-)Geoff,你错过了一个点,正如之前的评论所说。
更重要的是,我不知道你是否曾经想过为什么在使用position时,W3C 工作组的人让我们使用希腊语一样的词(在希腊语中,Yes 实际上听起来像Nay,而 No 是 Ochee,换句话说,有点像反过来……)。
这是因为,当我们设置内部元素、div、p 等的 position 时,我们称之为“absolute”,如果认为这个元素的 position 实际上是相对于它的容器/或之前的兄弟元素/计算的,而不是相反,那么这非常荒谬……
而且,更让人恼火的是,在今天的语法中,容器被认为相对于它的子元素具有 Relative position - 而不是Absolute,它应该这样……
在我看来,这是一个糟糕的语言选择,它破坏了语义的真正含义 - 我认为语义可能是表达我们在编写代码时理解和意图的最佳方式。
如果你试图告诉我,将其命名为Relative 可能是故意的(正确!),作为将其定位到它自己的祖先的一种方式,我会告诉你,以同样的方式,比如 Flex,position 的命名应该被设置。换句话说,同一个 div 可以对它自己的容器设置flex: 1,也可以对它自己的子元素设置display: flex。
既包含又包含(其他),对吗?
因此,你的“一切皆相对”规则,不幸地变成了……加上“或 Absolute”。
难怪有时(或经常)聪明人看到这种对最基本概念的漠不关心,就会选择发明他们自己的语言/库/。
许多语言都采用错误处理,但看看 Go 与 Node 是多么优雅地处理了这个问题。但当你创建一个真正的[命名]错误,并强迫我们所有开发者在 CSS 中每天使用它!?我觉得这太离谱了 :)
你怎么想?
将父元素/大兄弟/设置为position:absolute,并将它的子元素/小兄弟/设置为position:relative,这样不是更好吗?(当然,根据需要,后面跟着任何top 或 left 的内容)?
我想对 CSS 创建者说一句来自一部好电影的经典台词:[通过将子元素称为 Absolute 而不是 Relative] 对于你们这些聪明人来说,这真的太蠢了!
谢谢 :)
我的想法是?我对
position
关键字值非常满意。准确的语义并不困扰我,只要我们知道偏移值相对于什么以及它们是如何计算的。