在海賊王這部漫畫當中，有一個高人氣的反派角色，夏洛特·卡塔庫栗，他是 BIG MOM 海賊團「甜點三將星」之首、四皇「BIG MOM」夏洛特·莉莉的次子。
我們一般在刻畫或評斷一個角色用的手法，通常都是從這個角色的力量、敏捷、防禦力、智力等方面來刻畫，例如這個人一拳打下去可以貫穿幾座山，或是他的攻擊範圍有多大、反應速度有多快等等之類的。
但這個角色他除了上述這些能力都是頂尖等級以外，還有一個非常令人印象深刻，也是讓他的敵人非常懼怕的能力，就是他優越的見聞色霸氣已經鍛煉到能預知部份「未來」的程度。
在別人攻擊他之前，他就能夠在短暫幾秒前預知到而做出反擊或避開。甚至他平常在跟別人對話，別人問他問題之前，他就能夠先回答，讓跟他對話的人啞口無言。是個非常令人恐懼的能力。
[見聞色霸氣說明]
見聞色霸氣是霸氣之中的一種，強烈感知四周氣息的力量，可感應到視線外的對象甚至進一步預知對手動作，甚至聽見他人的心聲，是一種讀心術，也可以說是「聽的力量」；只要人還活著，身體就可以發出特殊的聲音，藉由這些聲音可以預測對手下一步的動作與位置，只要經過鍛鍊就能讓範圍變大。除此之外，亦能以視覺（看見人體散發的氣息）、嗅覺（準確感知週遭事物的氣味）等形式呈現。當將此霸氣修煉到極致時甚至能預知部分的未來。
除了力量、敏捷、防禦力、智力可以拿來評斷一個人的實力以外，能夠看見多遠的未來，也是非常厲害的一種能力。
一開始魯夫(路飛)跟他對戰時，因為卡塔庫栗能夠看見短暫的未來，完全被他壓著打而無法還手。但是在戰鬥過程當中魯夫也開始提升自己的見聞色霸氣，而能夠跟上卡塔庫栗，最終將他擊敗時，下面有一段非常另我印象深刻的對話：
卡：你將來會回來打敗 BIG MOM 嗎？
魯：那是當然的了！我可是要成為海賊王的男人啊！
卡：你還真是...看到了相當遙遠的未來了啊....(倒地)
能夠看見未來，確實是一個強大的能力，因為你可以預先知道一些會造成損害的事情，進而能事先避開他。我們寫程式不是也是如此嗎？
除了對某某技術的熟練度、掌握度之外，你能夠考慮到多遠的未來，也是我們實力的一部分。舉例來說：
因此，建立防患未然的心態，也是我們邁向進階的必經之路。
講到防患未然，我另外也想到一個故事：
一次，魏文王求教扁鵲：「你們家兄弟三人，都精於醫術，誰是醫術最好的呢？」扁鵲答：「大哥最好，二哥差些，我是三人中最差的一個。」魏王不解地說：「請你介紹的詳細些。」扁鵲解釋說：「大哥治病，是在病情發作之前，那時候病人自己還不覺得有病，但大哥就下藥剷除了病根，使他的醫術難以被人認可，所以沒有名氣，只是在我們家中被推崇備至。我二哥治病，是在病初起之時，症狀尚不十分明顯，病人也沒有覺得痛苦，二哥就能藥到病除，使鄉里人都認為二哥只是治小病很靈。我治病，都是在病情十分嚴重之時，病人痛苦萬分，病人家屬心急如焚。此時，他們看到我在經脈上穿刺，用針放血，或在患處敷以毒藥以毒攻毒，或動大手術直指病灶，使重病人病情得到緩解或很快治癒，所以我名聞天下。」魏王大悟。（《鶡冠子．世賢》）
就像是扁鵲的大哥，他能夠在病人病情發作之前，就發現問題並做出診斷和治療一樣，本系列文想要討論的面向是指在實作的時候，是否能夠未雨綢繆，可以提早考慮到一些危險狀況而事先避開，達到「防患未然」的防禦性效果。
防禦性 CSS 的原文是 Defensive CSS，題目的靈感是來自我在 Ahmad Shadeed 的部落格上看到的文章，他是一位來自巴勒斯坦的 Independent Product Designer 以及 Front End Developer。
當我們開發一個 UI 元件時，我們不是只要確定他在我們的電腦上能夠運作就好。例如，我們的畫面不是只有在特定的視窗大小、特定版本的瀏覽器等條件下能夠完好呈現。而是我們要訓練自己去考慮一些可能會讓元件故障的場景或邊緣條件(edge case)，進而想辦法事先避開這些故障。
學習防患未然的心態，能夠幫助我們減少我們即將會遇到的問題。本系列文將會逐一討論一些常見的設計案例，以及這些案例當中可以多考慮哪一些面向來讓我們避開問題。有時候好與壞的區別可能只是一行簡單的 CSS，但有能力可以考慮到這個面向而寫出那一行關鍵的 CSS，就是你比別人更經驗豐富的具體展現。
寫出能夠「防患未然」的程式碼，我覺得是剛入行的工程師需要花時間才能夠累積出來的能力。「經驗」之所以寶貴，是因為他不是只是透過看書就能夠學習到的，而是他會需要一些實戰的累積、有踩過什麼令人印象深刻的雷、有痛過一次而痛定思痛，而留在自己身上的痕跡。
希望本系列能夠幫助讀者更快速的累積這些經驗，並且建立起防患未然的思維以及態度。雖然或許沒有真的實踐過，但至少看過了會在腦中留下一點印象，那這些印象，就能夠成為往後在刻畫元件時，值得多考慮的一個面向，幫助我們防患未然。
iThome鐵人賽
看影片追技術