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

  • 发表于:
  • 本文为 InfoQ 中文站特供稿件
  • 首发地址https://www.infoq.cn/article/K0qTkPylVOMzCX8VQCTM
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券