我们最近与 Elad Shechter 谈论了 他的新 CSS 重置，此后不久，Josh Comeau 发表了他的博客。
我们正处于 CSS 重置的新时代，在这个时代……你实际上并不需要重置？浏览器在默认样式方面的差异并不那么大，而且当你开始使用样式时，你可能已经将样式覆盖掉了。因此，也许“现代”CSS 重置更像是一组有见地的默认样式，这些样式可以做一些有用的事情，而你希望这些事情在你的所有新项目中都能使用，因为，嗯，这就是你的做法。
浏览 Josh 的选择，这似乎就是它对我的意义：一个并非特别有见地的设计集合，但可以通过提供几乎所有项目都会需要的功能来辅助设计。
我将 浏览它 并抛出 🔥 火辣辣的观点。
*, *::before, *::after {
box-sizing: border-box;
}当然可以。我们过去认为这是 全球性节日。不过，随着越来越多的布局由网格和 flexbox 处理，我觉得它在当今变得没那么有用。当你使用 fr 单位和 flex 布局设置布局时，即使涉及 padding 和 border，box-sizing 模型也并没有那么起作用。但是，嘿，我仍然更喜欢它。我认为，如果将其添加到 CSS 重置中，应该 使用继承模型，因为这样更容易在组件上撤消它。
* {
margin: 0;
}这基本上是 CSS-Tricks 徽标“星形”存在的原因。我过去很喜欢在我的 CSS 重置中使用这段小代码。有一段时间，它开始感觉过于强势，但我认为我又开始喜欢它了。我喜欢你必须在应用任何边距时必须明确地指定它。就我个人而言，我也会使用 padding: 0;，因为列表元素往往会有一些填充将它们推来推去。如果你要清除间距，最好全部清除。
html, body {
height: 100%;
}可能是个好主意。Josh 说“允许在应用程序中使用基于百分比的高度”，我不能说这在我的日常工作中经常出现，但这会导致诸如主体背景无法按预期填充空间的情况。
太可惜 body { height: 100vh; } 在这里不够用，但我感觉它并不像预期的那样可靠，我现在想不起来原因了。也许与 iOS Safari 中的页脚导航有关？
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}我无法接受 -webkit-font-smoothing: antialiased;。我认为它会使字体变得过薄，我不喜欢它。我不反对它作为一个工具，但我不会在我的所有项目中全局应用它。
我通常也喜欢在 html 选择器上放置全局的字形大小样式，因为 rem 的“根”部分暗示了 <html> 元素，而不是 <body> 元素，我喜欢用 rem 设置大小，然后在媒体查询中调整根 font-size 的大小。
1.5 的值感觉是一个不错的默认 line-height（我自己更喜欢 1.4，但我宁愿向上调整，而不是向下调整）。但一旦设置它，我感觉自己被磁力吸引，要去减少标题元素的 line-height，因为它们总是过大。这可以通过 h1, h2, h3 类型的选择器来实现（也许 h4–h6 不需要它），但 Josh 使用了 一些 CSS 技巧，这段代码没有包含在最终的重置中。
* {
line-height: calc(1em + 0.5rem);
}对于小型字体，0.5rem 的效果非常明显，但对于大型字体，影响就不那么大了。我可以在新的项目中尝试使用它。以前在 “使用 calc 计算最佳行高” 中，Jesús Ricarte 也有类似的先例。
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}对于 CSS 重置来说，这是个好主意。那里的 block 显示类型可以防止那些让我头疼的烦人的 line-height 间隙。而且你几乎不希望任何这些媒体块比父元素更宽。不过，我不认为 picture 是必需的，因为它并不是一个可样式化的块？可能错了。我可能会将 iframe 和 object 也添加到其中。
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}这是一个很好的做法。当一个长单词（例如一个 URL）强制一个元素变宽并破坏布局时，就会出现问题。我倾向于将它放在某些地方，比如 article 或 .text-content 等等，并让它级联到整个区域（这也会捕获可能包含在不适当元素中的文本），但我并不介意把它放在特定的文本元素上。
如果你这样做，你可能想把 li, dl, dt, blockquote 添加到那个链中。尽管我已经尝试了几次研究这个问题（这里有一个游乐场），但我仍然不能百分百确定哪种行换行属性的组合最适合使用。我认为 word-break: break-word; 基本上是相同的东西。我认为一般来说最好使用 hyphens: auto;，对吧？
#root, #__next {
isolation: isolate;
}我不太理解这里发生了什么。我明白这是一个 React/Next 东西，你将应用程序挂载到这些根节点，而且我明白它创建了一个堆叠上下文，但我就是不明白为什么在该级别拥有该堆叠上下文有什么特别的用处。同时，我也没有发现任何问题。
总的来说，非常酷！我总是喜欢看其他人使用什么（以及建议使用什么）来进行 CSS 重置。
我已经在我的项目中使用它一段时间了。它有点超过了重置，又有点不足以成为一个库。我试图保持它非常小，但也有一些合理的默认值。
https://bedrocss.austingil.com/
很棒！让我想起了 MVP CSS，但可能更简洁一些。
根据博文，使用
#root, #__next { isolation: isolate; }的想法是确保当你最终添加一个使用 React Portal 将模态作为body的直接子元素的模态时，不会遇到z-index问题，其中页面上的某些元素会被渲染到模态之上。另一个有趣的 CSS 重置是 Santize.css
它比 Josh 现有的那个更具有见地性。
https://csstools.github.io/sanitize.css/
关于换行词组合，这是我在 2016 年想出的片段。（有些部分可能已经过时了）我只是继续在我的项目中将其用作实用程序类：https://stackoverflow.com/a/36555643/2382115
我认为在
picture元素上放置这些样式是一个好主意。虽然并不总是这样，但我遇到了很多情况，我希望图像填充其容器，结果却发现picture元素没有填充其容器，说“哈哈！我是容器！”。然后我必须同时定位两者，这……非常糟糕，而且我觉得我需要注释一下我的操作，因为这突然变成了一个个例情况 :/所以，是的，
picture元素绝对可以用这种方式进行样式化，而且当你最不希望它出现时，它可能会造成问题。如果你正在开始一个新的项目，最好提前将其解决。我看到了 Josh 的 CSS 重置中的许多优点，但我强烈反对在
img和svg元素上使用display: block，因为它基本上破坏了预期的行为。据我所知，Tailwind 也是这么做的，而且当你真正需要内联图像时，这会导致相当大的困扰。我在几个项目中遇到了这个问题，其中 SVG 图标需要与文本内联显示，而在另一个项目中，手绘的 PNG 图形用于增强文本块的外观。我自己的重置只是在图像元素上添加了
vertical-align: bottom，因为这也能解决底部间隙问题，但 IMO 对其他方面的影响更少。你指的是哪个级别？我的猜测是，对于 SPA 来说，该级别或多或少是
html标签的直接子元素，但对于微前端来说，它可能像你想的那样嵌套。在
html和body元素上使用height: 100%会出现问题/需要注意的地方……使用此 CSS，如果其内容溢出，
html/body元素将不会正确扩展。更多详细信息请参见此处https://stackoverflow.com/a/38908284/852382
您建议使用“rem”，如下所示
=> line-height: calc(1.0em + 0.5rem);
但我认为我们应该使用“像素”代替
=> line-height: calc(1.0em + 8px);
因为如果用户更改浏览器字体大小（例如，从 16px 更改为 32px），我们希望继续只添加“8 像素”，而不是突然添加 16 像素。
两种情况
当浏览器字体大小为 16px 时
• 一个 1.25 rem 的 CSS 字体（即 20px）的行高为 28px（即行高为 1.4）。• 一个 2.5 rem 的 CSS 字体（即 40px）的行高为 48px（即行高为 1.2）。
=> 技巧有效。
但
使用“rem”，当浏览器字体更改为 32px 时
• 第一个 CSS 字体将更改为 40px，其行高将更改为 56px（即行高为 1.4）。突然之间，我们添加了“16 像素”，而不是只添加“8 像素”。
=> 技巧不再有效。
使用“像素”，当浏览器字体更改为 32px 时
• 第一个 CSS 字体将变为 1.25 rem = 40px，行高变为“仅” 48px（即行高为 1.2）。
=> 技巧仍然有效。
我希望我没有犯任何错误。我进行的测试似乎证实了我的观点，但我对这个问题并不精通。非常感谢您所有非常有用的文章！