Debug 时,有个正确的态度至关重要

阅读数:2 2020 年 5 月 3 日 07:00

Debug时,有个正确的态度至关重要

Debug时,有个正确的态度至关重要

之前,我写过一篇文章《程序调试长什么样?》来讲述调试程序时应该做什么。有个基本要点:一次只改变一样东西,并核实你的假设。

但是,当我上周调试一些 CSS 程序时,我认为有些东西没讲:调试时的态度。

直到现在,我还不是一名杰出的 CSS 开发者。我不仅对很多基本的 CSS 概念缺乏理解,而且从来没有专业的写过 CSS。上周,我做了一个自己尝试过的最复杂的 CSS 项目。

当调试 CSS 项目时,我发现自己犯了一些不该犯的错误,这些错误有:

  • 盲目的随机修改代码,并妄想能奏效;
  • 在谷歌上搜了一大堆东西,还未理解就去尝试;
  • 如果代码出错,回退更改到原状,并重新折腾

这样,没有任何效果。之后,我意识到这是因为我对 CSS 的态度(有问题)。与平常调试不同,我这次有先入为主的想法(对我来说,CSS 太难,我搞不懂)。让我们谈谈调试程序时的态度问题。

错误的态度——我认为这太难了

当遇到一个具体问题,我有 2 个层叠的 div,想把 Div A 叠放到 Div B 上。最初,我认为的 CSS 层叠模型是这样:“如果你想要把 A 叠加到 B 上,只要改变 z-index 就好了。”因此,我将 Div A 的 z-index 改成 5。

但它并未生效。在 Firefox 环境中,Div A 显示在最上面,而在 Chrome 环境中,Div B 显示在最上面。真让人头大。

我用 google 搜索了一下,发现 z-index 没有生效的一个可能原因是,Div A 和 Div B 实际处于不同的“堆叠上下文”中。如果是这样,即使我将 Div A 的 z-index 设置为 999999,仍然不会将 Div A 叠放在 Div B 上。(这有一个关于 z-index 问题的小型示例,虽然我认为那个 bug 还有一些其他因素)

我认为,这些堆叠上下文的相关内容看上去异常复杂,为什么 Firefox 和 Chrome 环境会有所不同,我根本不可能弄明白这些东西。于是,我尝试了网上推荐的方法,但这些建议统统不管用。

最后,我放弃这种“盲目修改并撞大运的”策略,去阅读关于堆叠顺序的文档。

我看了 MDN 关于堆叠顺序的页面,上面写着:

当没有元素包含 z-index 属性时,元素按照如下顺序堆叠(从底到顶顺序):

  1. 根元素的背景和边界
  2. 普通流 (无定位) 里的块元素 (没有 position 或者 position:static;) 按 HTML 中的出现顺序堆叠
  3. 定位元素按 HTML 中的出现顺序堆叠

这么一解释,让我恍然大悟。这取决于 HTML 中的出现顺序!于是,我在 HTML 把 Div A 放在 Div B 的后面(作为同属(sibling)单元),这样它在两种浏览器的环境下都能正常工作。

正确的态度——让我们学习一些基础知识,看看是否有用

实际上,CSS 堆叠的问题并没有想象中那么复杂。你只需要阅读一个简单的文档,了解 CSS 是怎样进行堆叠的。

当然,计算机上的事情并非如此简单。而且即使在这个具体案例中,如果要深究怎样创建一个新堆叠上下文的规则,也很复杂。

所以,建议调试时,先冷静下来,学习一些基础知识,看看是否有所帮助。

在 CSS 中,另一个我认为“很难”理解的地方是关于position: absoluteposition: relative的一整套规则。我不断看到一些代码示例中,人们用position: absolute属性来制作复杂的 CSS,但我搞不明白它们如何工作。

但是上周,我与一个比我更擅长 CSS 的人一起写代码,我发现别人在自己的代码里信心满满地使用position: absoluteposition: relative属性。我也能成为这样的高手吗?

于是,我又去查阅 MDN 上关于position: absolute的文档,它是这样写的:

元素会被移出正常文档流,且在页面布局中不会为元素创建任何空间。元素位置是通过该元素相对于最近的定位祖先元素(closest positioned ancestor)的偏移量来确定的……元素的最终位置由 top、right、bottom 和 left 的值决定。

所以,如果一个元素带position: absolute属性,它的位置是相对于它们最近的定位祖先元素进行定位的!你只需要使用top/bottom/right/left这几个属性来决定它的位置!就是这么简单!

好的文档可以让你事半功倍

我认为此前对 CSS 丧失信心的另一个原因是,我不确定能在哪里找到准确的信息和建议。即使我知道 MDN 应该有帮助,但它无法解决非常具体的问题,比如我应该如何将一个 div 居中。为此我搜到许多答案,但我无法确定它们一定正确。

这周,我去 CSS Tricks 学习,发现很多非常棒的文章,比如 Centering in CSS: A Complete Guide ,这篇文章看上去很靠谱,而且写得清晰明了。

写在最后:

我不知道,为什么最初会坚信理解 CSS 的概念“是不可能的”,即使我往往认为计算机领域没有什么不可能。或许由于我在停留在 CSS 初级编程水平,却从未在这个领域深究。正是这种错误态度阻碍我写出好的 CSS 项目。

英文原文:

When debugging, your attitude matters

评论

发布