Categories
程式開發

Debug時,有個正確的態度至關重要


Debug時,有個正確的態度至關重要 1

之前,我寫過一篇文章《程序調試長什麼樣? 》來講述調試程序時應該做什麼。有個基本要點:一次只改變一樣東西,並核實你的假設。

但是,當我上週調試一些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