Normalize.css和Reset CSS有什麼區別？

705

我在normalize.css上工作。

的主要區別是：

Normalize.css保留使用默認值，而不是「unstyling」的一切。例如，像sup或sub這樣的元素在包含normalize.css（並且實際上變得更健壯）之後「正常工作」，而在包含reset.css之後，它們在視覺上與普通文本沒有區別。所以，normalize.css並沒有在你身上強加一個視覺起點（同質化）。這可能不符合每個人的口味。最好的做法是對兩者進行試驗，並根據您的偏好查看哪些凝膠。
Normalize.css更正了reset.css超出範圍的一些常見錯誤。它具有比重置範圍更廣的範圍。CSS，並且還提供了像常見的問題的錯誤修正：對於HTML5元素，缺乏font繼承由形式元素的顯示設置，校正font-size渲染爲pre，SVG溢出IE9，並在IOS的button造型錯誤。
Normalize.css不會弄亂你的開發工具。使用reset.css時常見的問題是瀏覽器CSS調試工具中顯示的大型繼承鏈。由於有針對性的風格，這對normalize.css來說不是這樣的問題。
Normalize.css是更加模塊化。該項目被分解爲相對獨立的部分，如果您知道這些部分永遠不會被您的網站所需，那麼您可以輕鬆地刪除部分（如表單規範化）。
Normalize.css有更好的文檔。 normalize.css代碼在內部以及在GitHub Wiki中更全面地記錄。這意味着你可以找出每一行代碼在做什麼，爲什麼包含它，瀏覽器之間有什麼區別，更容易運行你自己的測試。該項目旨在幫助教育人們如何默認瀏覽器呈現元素，並使他們更容易參與提交改進。

我寫的更詳細的關於這方面的文章about normalize.css

來源

2011-12-02 14:13:47 necolas

+18

很多時候，你不要把它們留在零（當使用重置時），所以你實際上編寫的代碼更少。如果你確實想要將某些值清零，那麼這種風格就與它所指向的元素相結合，並且應該能夠減輕調試的負擔。 – necolas

+8

而這是一個重要的問題，許多重置，其中包括一切事實，也放慢了瀏覽器。 – Rob

+4

而且這也是重置的優勢 - 規範化錯失大小問題，如下所示：https://github.com/yahoo/pure/issues/395 –

5

從描述中可以看出，它試圖使用戶代理的默認樣式在所有瀏覽器中保持一致，而不是像重置一樣去除所有默認樣式。

保留有用的默認值，不像許多CSS重置。

來源

2011-07-31 03:21:26 dbb

+0

所以最好是使用Normalize css over Reset？ –

+3

@Jitendra Vyas - no。這些工具是不同的，不是彼此更好或更差。選擇一個能夠幫助你解決你最好的問題的人。 – Quentin

+7

我不得不認爲規範化*比重置要好。這將導致更少的CSS通過線路傳輸，更好地使用UA默認值，並且更好地理解元素是如何顯示的。 –

212

的主要區別在於：

CSS重置旨在刪除所有內置瀏覽器的造型。像H1-6，p，strong，em等標準元素看起來完全一樣，完全沒有裝飾。你應該自己添加所有裝飾品。
Normalize CSS旨在使跨瀏覽器的內置瀏覽器樣式一致。諸如H1-6之類的元素將在瀏覽器中以一致的方式顯示爲粗體，大小等等。然後，您應該只添加差異您的設計需要的裝飾。

如果你的設計一）遵循排版等等，並B） Normalize.css適用於您的目標受衆，然後使用，而不是一個CSS復位Normalize.CSS會讓自己常用慣例CSS寫得更小更快。

來源

2011-08-01 10:06:28

+0

+1請詳細描述最後一段的情景 –

+6

@Jitendra Vyas：您的前端開發人員 - 實際上只有一種方法：閱讀備受好評的Normalize.CSS代碼，並決定它是否適合您是否需要。 https://github.com/necolas/normalize.css/blob/master/normalize.css –

+0

另一個注意事項：Normalize.css旨在儘可能不顯眼，這使得開發人員可以更輕鬆地編寫自己的代碼，而無需針對特定衝突。 – zzzzBov

35

Normalize.css的主要是一組樣式，基於它的作者以爲會很好看，並使它看起來對面一致瀏覽器。重置基本上從元素剝離樣式，所以你可以更好地控制一切的樣式。

我使用兩者。

一些樣式來自重置，一些來自Normalize.css。例如，從Normalize.css中，有一種風格可以確保所有輸入元素具有相同的字體，而不會發生（在文本輸入和文本區之間）。重置沒有這樣的風格，所以輸入具有不同的字體，這通常不是想要的。

所以bascially，使用兩個CSS文件做一個更好的工作 '均衡' 的一切;）

的問候！

來源

2012-06-01 00:32:16 ricmetalster

+1

這是一個很好的，實用的答案。它不一定是一個或另一個。採取你想要從每個。我喜歡完全重置，但是Normalizer提供了一些很好的功能，可以在ontop上運行。 – Undistraction

+3

@ricmetalster，所以你必須重新編寫自己的CSS來結合reset.css和normalize.css的功能嗎？ – ayjay

+1

如果你想同時使用，你可以先列出「重置」，然後「正常化」，然後在上面添加你的樣式？ – Craig

5

復位似乎是一個必然以滿足定製設計規範，特別是在複雜的，非樣板式的設計項目。聽起來好像標準化是繼續進行純粹的Web編程的好方法，但通常網站是Web編程和UI/UX設計規則的結合。

來源

2014-01-07 17:13:11 user3170099

+0

這對99％的用例來說是過量的。 – Michael

+0

@Michael哪一個？重置或正常化？（只是想了解人們對這個問題的看法） – Bren

+1

@Bren都重置並正常化。瞭解每個元素的默認CSS值是成爲一名優秀的前端開發人員的一部分。我把它們看作是不必要的蠻力方法。 – Michael

5

第一個reset.css是您可以使用的最差的庫，因爲它會在爲0分配邊距填充和其他屬性的值之後，刪除HTML的標準結構並顯示您以書面形式編寫的所有內容。因此，例如，您會發現<H1>將與<H6>相同。

在另一方面Normalize.css使用標準的結構，還修復了幾乎所有現有的在它的錯誤。例如，它修復了從一個瀏覽器向另一個瀏覽器顯示錶單的問題。 Normalize通過修改此功能來修復此問題，以便您的元素在所有瀏覽器上顯示相同。

來源

2016-07-23 11:59:32

+0

取決於您的使用案例。考慮你的例子，如果我需要爲我的項目修改所有標題標籤的字體樣式，我將不會使用任何默認值，對嗎？一個人不應該因爲在自己的項目中找不到用途而將庫標記爲「最差」。 – gdebojyoti

+0

重置的主要目的之一是解決瀏覽器應用樣式中出現的問題，這非常有用。我也認爲它不應該被視爲一個圖書館。 –

+0

@gdebojyoti有一些用例，但我很少希望所有標題的大小相同，無論它們各自的字體樣式如何。 –

0

有時，最好的解決方案是使用兩者。有時候，它既不使用也不使用。有時候，這是使用其中一種。如果您想要所有樣式（包括所有瀏覽器中的邊距和填充重置），請使用reset.css。然後自己應用所有裝飾和造型。如果您只是喜歡內置的樣式，但想要更多的跨瀏覽器同步性，即標準化，請使用normalize.css。但是，如果您選擇使用reset.css和normalize.css，請先鏈接reset.css樣式表，然後再立即鏈接normalize.css樣式表（立即）。有時候並不總是一個更好的問題，但是何時使用哪一個與什麼時候使用兩個時間以及什麼時候使用兩個都沒有關係。恕我直言。

來源

2017-09-22 20:18:40

Normalize.css和Reset CSS有什麼區別？

回答

相關問題