[CSS] 跨瀏覽器的樣式重置 reset.css & normalize.css
多數瀏覽器都有自己的預設樣式，而彼此之間都會有些些許的差異，如果不做一個初始化的動作，整個頁面會出現非預期的版面狀態，比如被預設了一些 margin ，或是字體大小。
關於使用 reset.css 已經好長一段時間，幾乎久到我已經忘記為什麼當初會知道它的存在了…
就如同上述所說的，已經接觸了很長一段時間，而且總是能在專案開始時馬上想到需要它，可以說這非常顯著的影響跨瀏覽器測試，甚至是移動裝置。
順帶一提，Codepen 中的 CSS 設定裡頭，有這兩個重置方式可以直接勾選。
那我該如何做初始化的動作？初始化很難嗎？
我們先針對 reset.css 來討論：
reset.css 想要減少瀏覽器在默認行高，邊距和各元素字體大小等方面的不一致，如果對其重置的方法有興趣，可以查看這裡。
但是 reset.css 做的是相當極端的，可以發現引入之後，不管是 h1 還是 h5 甚至是 span 標籤，大小都是一樣的。
優點 — 強迫開發者，針對每一個語義挑選對應標籤
缺點 — 過於激烈的重置，可能會用到有點北宋，如果多個組件必須先把 rule 整理出來。
如果是套件強迫症患者，可以使用這個非官方 package : reset.css (unmodified* copy of Eric Meyer’s CSS reset.)
許多時候一些小專案使用 reset.css 會有些心累，可以只把影響顯著屬性(margin & padding)的複寫掉，但瀏覽器預設樣式不一致始終存在。
有沒有其他不要這麼煩的Solution？
- 保留不衝突的預設值
- 更正常見的不一致
你要的就是 — Normalize.css，而且以上根本就是 normalize 的 repo 介紹所提到的優勢，可以說 normalize 就是為了取一個中間點，讓CSS重置後不用這麼讓人頭痛。
且不同於 reset.css 的 Unmodified copy ，它是一直持續在維護的專案
欸，可是我沒初始化也沒遇到你說的問題啊？
如果專案一開始是使用 CSS framework ，的確不需要去做初始化的動作，比如 Bootstrap 、 materialize 和 ant-design 中，在它們的樣式裡頭已經使用了normalize.css去做初始化的動作。
而有些框架裡頭會有自己初始化的規則，這種情況下不推薦重複初始化。
寫在後頭
我想這個初始化的動作，也是一個·前·端·的·試·練·之·門·。
如果停留在框架的巨人肩膀上，不會需要這種初始化的討論，框架已經做掉了這些煩人的事，但是跳下肩膀那刻會摔得很重，偶爾用最原生的 CSS 寫出來的東西，發現怎麼開手機或換個瀏覽器之後怎麼行為怪怪的…等等的。
這種時候是選擇回頭跳上巨人肩膀，還是探究一下呢？
不重複造輪子是一個開發原則，但不應該是學習時偷懶的藉口。
不可否認像是 jQuery/Bootstrap 這類的巨人是非常傑出的專案，也因為維護時程拉挺長，解決了各種意想不到的跨平台issue，比起重複造輪子，選擇使用傑出的框架或是 polyfill ，這都是很棒的選擇，但不是生產狀況的話，多花些時間探究可以學到更多。
