最近學(xué)習(xí)CSS，發(fā)現(xiàn)前輩們寫代碼之前都會先寫個reset.css文件急波，清除默認樣式从铲。為了搞清楚reset.css的原理，我讀了一些文章澄暮，收獲頗豐名段。
關(guān)于CSS Reset 那些事（一）之 歷史演變與Normalize.css
關(guān)于CSS Reset 那些事（二）之 Normalize.css 源碼解讀
關(guān)于CSS Reset 那些事（三）之 Normalize-zh.css 出爐
關(guān)于CSS Reset 那些事（四）之 構(gòu)架CSS基礎(chǔ)樣式庫
這位大神講解的非常詳細和全面阱扬，部分內(nèi)容了解即可，無需全部記住伸辟。重要總結(jié)知識點如下：
一. CSS Reset的誕生與演變
1. 早期的瀏覽器支持和理解的CSS規(guī)范不同麻惶，導(dǎo)致渲染頁面時效果不一致，會出現(xiàn)很多兼容性問題信夫。 2004年窃蹋，Tantek根據(jù)自身需要對于一些標簽進行了簡單的重置，早期的CSS Reset的作用就是清除所有瀏覽器默認樣式静稻，讓它一切歸零警没！
2. 很快谦去，人們發(fā)現(xiàn)了CSS Reset存在的一些問題滋迈，比如：
? ????? 1）*{ margin:0; padding:0; }會帶來性能問題
????? ? 2）使用通配符存在隱性問題
????? ? 3）過渡的標簽重置等于畫蛇添足
????????4）過渡的標簽重置導(dǎo)致語言元素失效
3. 面對爭議篓跛，大牛Jonathan Snook提出No CSS Reset颖杏，核心是Less is more，不再提倡暴力歸零方法窖梁。后來YUI更新了CSS Reset择镇，配套了?cssfonts.css?和?cssbase.css鸟廓。cssreset.css負責清除默認樣式,而cssfonts.css和?cssbase.css 負責將一些元素的默認樣式重設(shè)回來大州，這樣就消除了之前的爭議嗅回。
4. 但是國內(nèi)前端工程師們很尷尬的發(fā)現(xiàn)，YUI 提供的?cssfonts.css?和?cssbase.css?只考慮了西歐文字摧茴，于是乎，大廠們就開始摸索制定屬于自己的CSS Reset埂陆。
二. 替代品 Normalize.css?
Normalize.css 簡介
Normalize.css 只是一個很小的CSS文件苛白，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS Reset焚虱，Normalize.css是一種現(xiàn)代的购裙、為HTML5準備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap鹃栽、HTML5 Boilerplate躏率、GOV.UK、Rdio民鼓、CSS Tricks 以及許許多多其他框架薇芝、工具和網(wǎng)站上。
目前Normalize.css?已經(jīng)成為了CSS Reset的替代方案是無可爭議的事情了丰嘉。國內(nèi)著名的AliceUI夯到，AmazeUI?框架都是基于或者借鑒Normalize.css進行的制定化版本。
優(yōu)勢對比
前面講到CSS Reset的核心作用就是清零饮亏，而且過于暴力耍贾；那么作為后者Normalize.css阅爽，到底有什么優(yōu)勢可以完全取代前者呢？
1.Normalize.css 保護了有價值的默認值
Reset通過為幾乎所有的元素施加默認樣式荐开，強行使得元素有相同的視覺效果付翁。 相比之下，Normalize.css保持了許多默認的瀏覽器樣式晃听。 這就意味著你不用再為所有公共的排版元素重新設(shè)置樣式百侧。 當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致并盡可能與現(xiàn)代標準相符合杂伟。
2.Normalize.css 修復(fù)了瀏覽器的bug
它修復(fù)了常見的桌面端和移動端瀏覽器的bug移层。這往往超出了Reset所能做到的范疇。 關(guān)于這一點赫粥，Normalize.css修復(fù)的問題包含了HTML5元素的顯示設(shè)置观话、預(yù)格式化文字的font-size問題、在IE9中SVG的溢出越平、許多出現(xiàn)在各瀏覽器和操作系統(tǒng)中的與表單相關(guān)的bug频蛔。
3.Normalize.css 修復(fù)了瀏覽器的bug
使用Reset最讓人困擾的地方莫過于在瀏覽器調(diào)試工具中大段大段的繼承鏈。在Normalize.css中就不會有這樣的問題秦叛，因為在我們的準則中對多選擇器的使用時非常謹慎的晦溪，我們僅會有目的地對目標元素設(shè)置樣式。
4.Normalize.css 是模塊化的
這個項目已經(jīng)被拆分為多個相關(guān)卻又獨立的部分挣跋，這使得你能夠很容易也很清楚地知道哪些元素被設(shè)置了特定的值三圆。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。
5.Normalize.css 擁有詳細的文檔
Normalize.css的代碼基于詳細而全面的跨瀏覽器研究與測試避咆。這個文件中擁有詳細的代碼說明并在Github Wiki中有進一步的說明舟肉。這意味著你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼查库、瀏覽器之間的差異路媚，并且你可以更容易地進行自己的測試。
這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的樊销，同時也讓人們很容易地明白如何改進瀏覽器渲染整慎。
三、Normalize.css??源碼解析
此部分內(nèi)容均為重要知識點围苫，請參考 開頭推薦的文章系列（二）和（三）裤园。
四、關(guān)于CSS 基礎(chǔ)庫
為什么要做 CSS 基礎(chǔ)庫够吩？
思考以下場景：
1.假設(shè)你要做一個游戲單頁面比然，網(wǎng)頁上并不存在表單內(nèi)容，那么你就要移除一些冗余的代碼周循，開始自定義Normalize.css樣式來滿足自己的需求强法。
2.假設(shè)你要做一份文案策劃的網(wǎng)頁万俗，包含很多文字排版時，此時Normalize.css也許并不完全適合你饮怯，因為它的默認字體設(shè)置和排版布局可能不能滿足你的要求闰歪。
從以上場景可以看出，在構(gòu)建大型網(wǎng)站的時候蓖墅，我們可以把Normalize.css作為基礎(chǔ)樣式库倘，然后根據(jù)不同的頁面需求，進行添加樣式覆蓋它论矾。
CSS 基礎(chǔ)庫到底包含什么內(nèi)容教翩？
我認為基礎(chǔ)樣式庫?始終?能幫我們解決開發(fā)時遇到的一些基礎(chǔ)性問題：
? ? ? ?1） 如瀏覽器樣式不統(tǒng)一，需要重置樣式贪壳；
? ? ? ? 2）如基礎(chǔ)表單樣式過于難看不易操作饱亿，需要優(yōu)化其樣式；
? ? ? ?3） 如布局樣式需要重復(fù)編寫闰靴，需要一套穩(wěn)定復(fù)用的解決方案彪笼；
? ? ? ? 4）如一些樣式的浮動，對齊操作蚂且，需要統(tǒng)一管理起來進行多次復(fù)用配猫；
? ? ? ? 5）如常見的CSS動畫效果，需要統(tǒng)一起來管理方便復(fù)用杏死；
? ? ? ? 6）如一些常用的圖標泵肄，需要一套可復(fù)用的字體圖標；
? ? ? ? 7）如需要打印淑翼，提供一套更為合理的打印樣式
基礎(chǔ)庫初衷和未來方向：
? ? ? ? 1）最大程度減少開發(fā)難度
? ? ? ? 2）提供簡潔高效開發(fā)體驗
? ? ? ? 3）趨于模塊化樣式構(gòu)建規(guī)范
? ? ? ? 4）做為未來UI組件庫核心基礎(chǔ)
? ? ? ? 5）始終站在巨人肩上
