什么是css reset?

眾所周知，HTML標(biāo)簽在瀏覽器里都有默認(rèn)的樣式，例如p標(biāo)簽有上下邊距，strong標(biāo)簽有字體加速樣式等，em標(biāo)簽有字體傾斜樣式；不同的瀏覽器默認(rèn)樣式之間也會(huì)有差別，例如ul標(biāo)簽?zāi)J(rèn)帶有縮進(jìn)樣式，在IE下它的縮進(jìn)是由margin實(shí)現(xiàn)的，但在Firefox下它的縮進(jìn)是由padding實(shí)現(xiàn)的。開(kāi)發(fā)時(shí)，瀏覽器的默認(rèn)樣式會(huì)給我們帶來(lái)很多兼容性問(wèn)題，影響開(kāi)發(fā)效率?，F(xiàn)在很流行的解決方式是一開(kāi)始就將瀏覽器的默認(rèn)樣式全部覆蓋掉。這就是css reset;

什么是css 預(yù)編譯器？

首先我們先弄清楚為什么會(huì)出現(xiàn)css預(yù)編譯器呢？ 這就要談到css的不足了，CSS不支持嵌套，甚至運(yùn)算、變量、復(fù)用等這些幾乎是編寫(xiě)復(fù)雜代碼的必備特性，開(kāi)發(fā)者們不斷探索著能夠彌補(bǔ)這些缺陷的解決方案，CSS預(yù)編譯器是第一種順勢(shì)而生的革命性方案
簡(jiǎn)單的說(shuō)，css預(yù)編譯器，是基于css語(yǔ)言的，能夠讓css也能有一種編程語(yǔ)言范，從而，解決了css的諸多問(wèn)題，如css模塊化、無(wú)法嵌套書(shū)寫(xiě)、沒(méi)有變量。

css 預(yù)編譯器從下面幾個(gè)方面提升了css的開(kāi)發(fā)效率：

1. 增強(qiáng)編程能力；
2. 增強(qiáng)可復(fù)用性；
3. 增強(qiáng)可維護(hù)性；
4. 更便于解決瀏覽器兼容性

預(yù)編譯器的原理：

CSS預(yù)編譯的工作原理是提供便捷的語(yǔ)法和特性供開(kāi)發(fā)者編寫(xiě)源代碼，隨后經(jīng)過(guò)專門(mén)的編譯工具將源碼轉(zhuǎn)化為CSS語(yǔ)法。最早的CSS預(yù)編譯器是2007年起源于Ruby on Rails社區(qū)的SASS，目前比較流行的其他CSS預(yù)編譯器如Less、Stylus的誕生都一定程度上受到了SASS的影響和啟發(fā)。

不同的預(yù)編譯器特性雖然有所差異，但核心功能均圍繞這些目標(biāo)打造，比如：

• 嵌套；
• 變量；
• mixin/繼承；
• 運(yùn)算；
• 模塊化；

1. 嵌套是所有預(yù)編譯器都支持的語(yǔ)法特性，也是原生CSS最讓開(kāi)發(fā)者頭疼的問(wèn)題之一；
2. mixin/繼承是為了解決hack和代碼復(fù)用；
3. 變量和運(yùn)算增強(qiáng)了源碼的可編程能力；
4. 模塊化的支持不僅更利于代碼復(fù)用，同時(shí)也提高了源碼的可維護(hù)性。

后編譯器(post css)是什么？

CSS預(yù)編譯的理念與Babel有一定相通之處，最重要的區(qū)別是：預(yù)編譯語(yǔ)法并非規(guī)范的CSS，而是各成一派。由預(yù)編譯語(yǔ)法編寫(xiě)的源代碼不能在任何宿主瀏覽器中運(yùn)行。從這個(gè)角度考慮，CSS預(yù)編譯更像CoffeeScript、TypeScript等JavaScript子集?？梢灶A(yù)見(jiàn)的是，如果未來(lái)CSS規(guī)范推出了預(yù)編譯類似的特性和語(yǔ)法，這些預(yù)編譯器都將成為歷史的塵埃。PostCSS則反其道而行之，從理念上更加接近Babel，業(yè)內(nèi)也有人將其稱為“CSS的Babel”。

PostCSS鼓勵(lì)開(kāi)發(fā)者使用規(guī)范的CSS原生語(yǔ)法編寫(xiě)源代碼，然后配置編譯器需要兼容的瀏覽器版本，最后經(jīng)過(guò)編譯將源碼轉(zhuǎn)化為目標(biāo)瀏覽器可用的CSS代碼。PostCSS提供了豐富的插件用于實(shí)現(xiàn)不同場(chǎng)景的編譯需求，最常用的比如autoprefixer、sprites等，編譯流程如下圖所示：

image.png

PostCSS并不是另一種CSS預(yù)編譯器，與SASS、Less等預(yù)編譯器也并不沖突。PostCSS與Babel的不同之處在于，它所支持的所謂“未來(lái)CSS語(yǔ)法”并不是嚴(yán)格的CSS規(guī)范，其中大部分語(yǔ)法和特性目前只是CSS4的草案而已。很多人將PostCSS稱為“CSS后編譯器”，這個(gè)稱謂可以一定程度上說(shuō)明目前業(yè)界對(duì)PostCSS的普遍使用方案，請(qǐng)看下圖：

image.png

使用CSS預(yù)編譯彌補(bǔ)CSS源碼的弱編程能力，比如變量、運(yùn)算、繼承、模塊化等；
使用PostCSS處理針對(duì)瀏覽器的需求，比如autoprefix、自動(dòng)css sprites等。