发布时间:
原文地址: A (more) Modern CSS Reset 来自 Andy Bell
我大约 4 年前写了“现代 CSS 重置”，是的，它并没有过时。几天前我发现它再次被链接起来，并认为发布更新版本可能是个好主意。
我知道我在开源维护方面也有糟糕的记录，所以我想我应该存档原始内容并发布此内容。用它做你想做的事！
需要明确的是，这是一个对我个人和 Set Studio 都有效的重置。每当我提到“我们”时，我指的就是那些人。
整体重置 #
/* 盒子尺寸规则 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 防止字体大小膨胀 */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* 删除默认边距，以便更好地控制编写的 CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin-block-end: 0;
}
/* 删除具有列表角色的ul，ol元素上的列表样式，这表明默认样式将被删除 */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* 设置 body 默认值 */
body {
min-height: 100vh;
line-height: 1.5;
}
/* 在标题和交互元素上设置较短的行高 */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}
/* 平衡标题上的文本换行 */
h1, h2,
h3, h4 {
text-wrap: balance;
}
/* 没有类的元素将获得默认样式 */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}
/* 使图像更易于使用 */
img,
picture {
max-width: 100%;
display: block;
}
/* 继承输入和按钮的字体 */
input, button,
textarea, select {
font-family: inherit;
font-size: inherit;
}
/* 确保没有行属性的文本区域不是很小 */
textarea:not([rows]) {
min-height: 10em;
}
/* 任何被锚定的东西都应该有额外的滚动边距 */
:target {
scroll-margin-block: 5ex;
}分解 #
按照传统，我们来分解一下：
/* 盒子尺寸规则 */
*,
*::before,
*::after {
box-sizing: border-box;
}这条规则非常容易理解，但简而言之，我将所有元素和伪元素设置为使用 border-box， 而不是默认的大小 content-box。现在我们更专注于让 浏览器 通过 流体类型和空间 的 灵活布局做更多工作，这条规则不再像以前那么有用了。但是，项目没有明确的大小 设置的情况很少见，因此它仍然在重置中占有一席之地。
/* 防止字体大小膨胀 */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}对此最好的解释是 Kilian。 他还解释了为什么我们仍然需要那些丑陋的前缀。
/* 删除默认边距，以便更好地控制编写的 CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin-block-end: 0;
}我总是倾向于删除用户代理样式的边距，以便 在更宏观的层面上定义流程和空间。借助逻辑属性，我现在删除了末端边距，而不是旧重置中的所有边距。它在生产中似乎效果很好。
/* 删除具有列表角色的 ul、ol 元素上的列表样式，这表明将删除默认样式 */
ul[role='list'],
ol[role='list'] {
list-style: none;
}Safari 做了一些疯狂的事情，其中包括 ：如果你删除列表样式，他们就会删除 VoiceOver 的语义。有些人会说这是一个功能，有些人会说这是一个错误。我认为这很愚蠢，但为了确保添加 role ，我默认删除了列表样式作为小小奖励。
/* 设置核心 body 默认值 */
body {
min-height: 100vh;
line-height: 1.5;
}我喜欢继承清晰易读的行高。 100vh 在正文中设置最小高度也非常方便，特别是当你要设置装饰元素时。使用像这样的新单位可能很诱人 dvh，但如果你 像 Ahmad 一样深入研究，你会发现这会导致更多问题而不是解决方案，而这并不是你希望重置的结果！
该 svh 单位似乎比 dvh 更好 ，但我对 vh 很满意。在深入研究新单位之前，请务必确保您了解它们，或者将它们推荐为福音是我的建议。如果某些东西已经适合您，则无需更改它！
/* 在标题和交互元素上设置较短的行高 */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}就像 line-height 全局使用大写字母很方便一样，标题和按钮等使用较短的字母也同样方便。 line-height 但是，如果您的字体有较大的上升部和下降部，则绝对值得删除或修改此规则。您最不希望看到的是它们相互冲突并造成可访问性问题。
/* 平衡标题文本换行 */
h1, h2,
h3, h4 {
text-wrap: balance;
}这条规则对于我们的项目来说相当特殊，但这个较新的 text-wrap 属性让标题看起来很漂亮。我想有些人会觉得这不合适，所以你可能想删除它。
/* 没有类的元素获得默认样式 */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}此规则首先确保文本装饰不会干扰上升部和下降部。我认为这现在在浏览器中大多是默认设置，但设置它也是很好的保险策略。我们喜欢 在工作室currentColor 默认设置链接以继承文本 ，但如果没有，您可能希望将其删除。
/* 继承输入和按钮的字体 */
input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
}此时让表单元素和按钮继承一些字体属性很有用。它主要会影响 <textarea> 元素，但将其应用于其他表单元素也没有什么坏处，因为它可以在项目后期节省一些 CSS。
/* 确保没有 rows 属性的文本区域不是很小 */
textarea:not([rows]) {
min-height: 10em
}说到 <textarea> 元素，这条规则很方便。默认情况下，如果不添加属性 rows ，它们可能非常小。这对于手指等粗指针来说并不理想，而且通过代理， <textarea> 元素往往用于多行文本。让这更容易一些是有意义的。
/* 任何已锚定的内容都应该有额外的滚动边距 */
:target {
scroll-margin-block: 5ex;
}最后，如果某个元素是锚定的，则有必要用 在其上方添加一些空间 scroll-margin，但只有当该元素是目标元素时才会考虑这一点。 小小的调整可以带来很多用户体验！ 不过，如果您有一个固定标题，您可能需要调整这一点。
总结 #
这次重置会持续 4 年吗？也许吧！ 另一次重置 肯定没有造成问题。
无论如何，它作为在工作室启动项目的基础非常有用 。我们不会回头并追溯更新客户项目上的其他重置，因为那个重置工作得非常好。
重置是人们最关心的事情之一，但实际上，现在的浏览器已经如此优秀，你可能根本不需要重置。我的建议是从网上找到的重置中挑选出你喜欢的部分，然后创建适合 你和你团队的重置。