最近，我們討論了Elad Shechter的新CSS重置，緊隨其後的是Josh Comeau關於該主題的洞察力博客文章。這標誌著CSS重置景觀的轉變。過去的顯著瀏覽器樣式差異不太普遍，而且通常，在項目的樣式正在進行時，無論如何，許多默認樣式被覆蓋了。因此，“ Modern” CSS重置正在演變為精心策劃的默認樣式集合，為新項目提供實際好處。
研究喬什的方法，似乎恰恰是：樣式的彙編不是固有的，而不是通過提供常見所需的項目功能來支持設計。讓我們通過一些評論來分析他的選擇。
*， *， *::之前， *:: after {
盒子大小：邊框框；
}廣泛接受的做法。儘管使用網格和Flexbox佈局的使用可能會略微降低其實用性，但它仍然是一致尺寸的首選方法。理想情況下，CSS重置應利用繼承，以便在組件級別更容易覆蓋。
* {
保證金：0;
}消除默認利潤的簡潔方法。儘管在某些情況下有潛在的副手，但它可以實施明確的保證金聲明，從而提高了清晰度。將此與padding: 0;將解決默認列表項目填充。
html，身體{
身高：100％；
}確保基於百分比的高度正確功能的有用策略，以防止意外的背景行為。而body { height: 100vh; }似乎足夠了，它缺乏相同的可靠性，這可能是由於iOS Safari怪癖所致。
身體 {
線高：1.5;
-webkit-font-smoothing：抗血症；
} -webkit-font-smoothing屬性會導致過度薄的版式。雖然是有價值的工具，但全球應用程序並不總是理想的。通過html選擇器管理全局印刷尺寸，並通過媒體查詢調整根字體大小，可提供更多的控制。線路高1.5是合理的默認值，儘管某些值可能會優選接近1.4的值。但是，經常需要進行標題調整。喬什的聰明替代方案：
* {
線高：計算（1EM 0.5REM）;
}這是根據字體尺寸動態調整線路高度的，提供了可擴展的解決方案。這項技術受到JesúsRicarte在最佳線路高度計算方面的工作的啟發，值得探索。
IMG，圖片，視頻，畫布，SVG {
顯示：塊;
最大寬度：100％；
}固體包容性。 display: block;消除線路高問題， max-width: 100%;防止媒體元素溢出容器。而包括<picture></picture>是有爭議的，補充<iframe></iframe>和<object></object>將增強完整性。
P，H1，H2，H3，H4，H5，H6 {
溢流包：break-word;
}防止長詞（如URL）破壞佈局至關重要。將其應用於.text-content這樣的更廣泛的選擇器允許級聯，但是針對特定元素是可以接受的。考慮添加<li>，，，，<dl></dl> ，，，，<dt></dt> ， 和<blockquote></blockquote>用於全面的線條包裝。線路包裹屬性的最佳組合仍然是正在進行的討論的主題。
#root，#__next {
隔離：分離；
}此react/next.js特定片段會創建一個堆疊上下文。儘管其確切的好處並不明顯，但並未引入明顯的問題。
總體而言，喬什的重置是一種經過深思熟慮的方法。檢查和比較不同的CSS重置策略總是有益的。
以上是關於喬什·科莫（Josh Comeau）的註釋的詳細內容。更多資訊請關注PHP中文網其他相關文章！
