我們真的需要CSS重置來清除默認(rèn)樣式嗎？

時(shí)間：2022-05-29 16:42:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 16:42:01 來源：網(wǎng)絡(luò)營銷

每個(gè)瀏覽器都有他自己的一個(gè)默認(rèn)樣式，用來保證HTML在沒有自定義樣式的情況下也能被有據(jù)可循的渲染，比如：未訪問的鏈接是藍(lán)色、訪問過的是紫色、strong標(biāo)簽加粗顯示、H1的字號大一些。然而，各廠商就是喜歡讓我們的生活豐富多彩一點(diǎn)，然后每個(gè)瀏覽器的默認(rèn)樣式都不相同。所以，你怎么能保證你的自定義樣式不會(huì)被瀏覽器的默認(rèn)樣式影響呢？

1、CSS重置

css reset即css重置，也就是重置默認(rèn)樣式。在不同瀏覽器，HTML中標(biāo)簽的默認(rèn)樣式有一個(gè)默認(rèn)屬性值，渲染出來的效果不盡相同，我們在寫css頁面的時(shí)候，為了避免在css中重復(fù)定義它們，我們需要重置默認(rèn)樣式，以方便統(tǒng)一，從而提高開發(fā)效率，提高樣式代碼的重用，減少重復(fù)代碼，減少維護(hù)成本。

通常我們用CSS重置來清除瀏覽器內(nèi)置的默認(rèn)樣式，所有的字體和line-height都設(shè)置為100%，margin、padding設(shè)置為0px，去掉border，列表也無樣式。

Eric Meyer的CSS重置方案是第一個(gè)也是被大家廣泛使用的，HTML5 doctor的HTML5 Reset Stylesheet也可以幫助設(shè)置一些新的元素（具體可查看億企邦的《解析HTML5頁面元素的嵌套規(guī)則及引起的錯(cuò)誤問題》相關(guān)介紹）。

2、應(yīng)該使用CSS重置嗎？

我隨便看了30個(gè)網(wǎng)站，其中大多數(shù)都使用了CSS重置。他的優(yōu)點(diǎn)很明顯：

（1）、可以提供完全空白的畫布，然后你就可以自己定義相應(yīng)的樣式了。

（2）、開發(fā)更加有邏輯性：你只是添加樣式而不是移除和修改。

（3）、瀏覽器的兼容性問題可以降到最小。

盡管有這些優(yōu)點(diǎn)，但是我還是不使用CSS重置。實(shí)際上，也不完全正確，我會(huì)使用margin和padding的重置，因?yàn)槟J(rèn)的實(shí)在是沒用，如下所示：

* { padding: 0; margin: 0; }

有的人會(huì)覺得這樣的寫法會(huì)影響到所有的標(biāo)簽，有的開發(fā)者會(huì)告訴你這會(huì)讓CSS的渲染效率變低，但目前為止億企邦還沒遇到過這樣的問題。

3、我對CSS重置的6個(gè)疑問

當(dāng)您靜下心來，審視你這幾年對CSS的使用，您再去思考CSS重置，從它的歷史，從它繁盛的原因，去思考CSS重置的本質(zhì)，標(biāo)簽的意義，您就會(huì)發(fā)現(xiàn)，CSS重置這個(gè)概念本不應(yīng)該流行與繁盛，雖然它有道理，但是實(shí)際上是個(gè)可有可無的東西。對此，億企邦可以從以下幾個(gè)方面闡述我的觀點(diǎn)：

（1）、增加頁面的大小

大多數(shù)CSS重置文件都在2kb左右（未壓縮），聽著不大，但是如果我的CSS總共才10kb，那么這就不是個(gè)小數(shù)字了（具體可查看億企邦的《CSS常用代碼使用技巧大全》相關(guān)介紹）。

（2）、額外的影響

CSS重置需要你去重置所有的元素，增加文件大小，有些時(shí)候，瀏覽器默認(rèn)還是不錯(cuò)的，字體大小，行間距，鏈接邊框以及列表樣式都還是不錯(cuò)的，如果不行，億企邦建議你可以再單獨(dú)去改。

（3）、不同的瀏覽器渲染頁面也不同

沒有哪兩個(gè)瀏覽器渲染出來的頁面是完全相同，一像素不差的，CSS重置給人的感覺就好像要完成這個(gè)目標(biāo)，其實(shí)不行。

一般情況下，大多數(shù)人并不在乎Firefox下面的標(biāo)題比IE下面的大2px，或者Opera的bold屬性比Chrome的更加好看，實(shí)際上，CSS重置也解決不了這個(gè)問題（具體可查看億企邦的《資深Web前端開發(fā)工程師教你如何優(yōu)化CSS框架》相關(guān)介紹）。

（4）、不否認(rèn)對瀏覽器的測試

億企邦不是太認(rèn)可CSS重置在各瀏覽器下面的一致性，你必須在很多的設(shè)備和瀏覽器下面測試你的網(wǎng)站或者程序，才能定位到錯(cuò)誤到底是你的代碼還是瀏覽器的問題。

（5）、工作習(xí)慣的不同

我不太使用CSS框架，我很少能遇到可以在正在建設(shè)的網(wǎng)站中通用的CSS方案，我可能會(huì)從其他地方copy一些代碼過來，但是一般我還是喜歡從空文件開始寫。他完全是我的代碼，我能很快知道問題在哪。

雖然不是那么復(fù)雜，但是CSS框架中的重置代碼經(jīng)常導(dǎo)致一些問題。

（6）、并不節(jié)省時(shí)間

首先，在做CSS重置之前，我們要先問下自己：CSS重置真的節(jié)省了你的開發(fā)時(shí)間嗎？

在我被CSS重置的支持者攻擊之前，我先聲明，并不是永遠(yuǎn)都不用?？赡軐δ銇碚f有用，但是對那些新的WEB開發(fā)人員是否同樣有用呢？當(dāng)你要添加一個(gè)CSS重置代碼的時(shí)候，是真的有用呢？還是只是一個(gè)習(xí)慣而已？

對此，億企邦建議你可以做一個(gè)測試，從你的網(wǎng)站里面去掉CSS重置的樣式，看看是否真的有顯著的不同？相信你就有了自己的答案了。

億企邦點(diǎn)評：

我認(rèn)為，CSS重置是個(gè)非常尷尬的概念，這是與性能，優(yōu)化的概念是相悖的，但是，實(shí)際上，有時(shí)候它的存在似乎有一定的道理的，比如設(shè)置默認(rèn)的a標(biāo)簽的屬性，所以，至于用不用？怎么用？還是要看程序員個(gè)人的喜好來定了。