我的 CSS 重置

2025-06-10

我的 CSS 重置

许多前端开发者一开始都会用 Normalize 来设计他们的网站样式。有些开发者会根据个人喜好，将自己的偏好添加到 Normalize.css 中。我也有自己的偏好。

在本文中，我想与您分享这些偏好。个人 CSS 重置（除了 Normalize.css 之外我还使用）。

我把重置分为 8 类：

  1. 盒子尺寸
  2. 删除边距和填充
  3. 列表
  4. 表单和按钮
  5. 图片和嵌入
  6. 表格
  7. 隐藏属性
  8. 无脚本

盒子尺寸

该box-sizing属性改变了 CSS 盒子模型的工作方式。它改变了width、height、padding、border和margin属性的计算方式。

的默认设置box-sizing是content-box。我更喜欢将其更改为，border-box因为这样我更容易设置padding和的样式width。

有关 Box Sizing 的更多信息，您可能对“了解 Box Sizing ”感兴趣。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}
Enter fullscreen mode Exit fullscreen mode

删除边距和填充

浏览器会为不同的元素设置不同的外边距和内边距。如果我不了解这些默认设置，就会感到困惑。编写代码时，我更喜欢自己设置所有外边距和内边距。

/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

列表

disc我在很多情况下使用无序列表，而且大多数情况下不需要样式。这里我设置list-style为 none。当我需要disc样式时，我会在特定情况下手动将其设置回来。<ul>

/* Removes discs from ul */
ul {
  list-style: none;
}
Enter fullscreen mode Exit fullscreen mode

表单和按钮

浏览器不会继承表单和按钮的字体。它们设置font为400 11px system-ui。我觉得这很不可思议，也很怪异。我总是得手动让它们从祖先元素继承。

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}
Enter fullscreen mode Exit fullscreen mode

不同的浏览器对表单元素和按钮的边框样式有不同的要求。我不喜欢这些默认样式，更喜欢将它们设置为1px solid gray。

input,
textarea,
button {
  border: 1px solid gray; 
}
Enter fullscreen mode Exit fullscreen mode

我对按钮做了一些调整：

  1. 将按钮填充设置为0.75em和，1em因为根据我的经验，它们看起来像是合理的默认值。
  2. border-radius删除了应用于按钮的默认值。
  3. 强制背景颜色透明
button {
  border-radius: 0; 
  padding: 0.75em 1em;
  background-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

最后，我将 设置pointer-events: none为按钮内的元素。这主要用于 JavaScript 交互。

（当用户点击按钮中的某个东西时，他们点击的是东西，而不是按钮。如果按钮内有 HTML 元素，event.target这种样式可以更容易地处理事件）。click

button * {
  pointer-events: none;
}
Enter fullscreen mode Exit fullscreen mode

媒体元素

媒体元素包括图片、视频、对象、iframe 和嵌入。我倾向于让这些元素与其容器的宽度保持一致。

我还将这些元素设置为display: block因为inline-block在元素底部创建了不需要的空白。

embed,
iframe,
img,
object,
video {
  display: block;
  max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

表格

我很少使用表格，但有时它们可​​能有用。以下是我一开始使用的默认样式：

table {
  table-layout: fixed;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

隐藏属性

当元素具有hidden属性时，它们应该隐藏起来。Normalize.css 已经为我们实现了这一点。

[hidden] {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

这种风格的问题在于其特异性较低。

我经常hidden给其他元素添加类名。类名的优先级比属性高，所以display: none属性不起作用。

这就是为什么我选择用 来提高[hidden]的特殊性!important。

[hidden] {
  display: none !important;
}
Enter fullscreen mode Exit fullscreen mode

无脚本

如果组件需要 JavaScript 才能运行，我会添加一个<noscript>标签来让用户知道（如果他们已经禁用 JavaScript）。

这将为标签创建默认样式<noscript>。

/* noscript styles */
noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}
Enter fullscreen mode Exit fullscreen mode

总结

每个人开始项目的方式都不一样。请随意使用我提到的任何样式。这是我个人 CSS 重置的Github 仓库。

您有什么建议可以改进这个 CSS Reset 文件吗？如果有，请随时联系我！

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员，请订阅我的新闻通讯。

鏂囩珷鏉ユ簮锛�https://dev.to/zellwk/my-css-reset--jbp
Devto 翻译
PREV
播种数据库
NEXT
在 JavaScript 中循环遍历对象