关于乔什·科莫（Josh Comeau）的注释

最近，我们讨论了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中文网其他相关文章！