如何用本身喜欢的 CSS 风格重置网站的样式

翻译：疯狂的技术宅
原文： https://medium.freecodecamp.o...

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些本身偏好的样式，我也同样。

在本文中，我会与你分享我本身的 CSS reset 项目（除了 Normalize.css 以外我还使用它们）。

我将 reset 项分为8类：

1. 盒子大小
2. 删除边距和填充
3. 列表
4. 表格和按钮
5. 图像和嵌入视频
6. 表格
7. 隐藏属性
8. Noscript

调整盒子大小

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

box-sizing 的默认设置是 content-box。我更喜欢将其改成 border-box，由于这样更容易设置 padding 和 width.。

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

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

删除边距和填充

浏览器对不一样元素 margin 和 padding 的设置各不相同。当我不了解这些时，默认设置会让我失望。可是我更喜欢经过本身编码设置全部边距和填充。

/* 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;
}

列表

我在不少状况下都使用无序列表，并且不少状况下都不须要 disc 样式。在这里我将 list-style 设置为 none 。当我须要 disc 样式时，会在特定的 <ul>上手动设置它。

/* Removes discs from ul */
ul {
  list-style: none;
}

表单和按钮

浏览器不会继承表单和按钮的排版。他们将 font 设置为 400 11px system-ui。我认为这是使人难以置信和奇怪的。因此我老是要手动让它们从祖先元素继承样式。

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

不一样的浏览器为表单元素和按钮设置了不一样的边框样式。我很不喜欢这些默认样式，宁愿将它们设置为 1px solid gray。

input,
textarea,
button {
  border: 1px solid gray; 
}

我对按钮作了一些调整：

1. 将按钮的 padding 设置为 0.75em 和 1em ，由于这看起来更符合我经验中的合理默认值。
2. 删除了应用于按钮的默认 border-radius 。
3. 强制背景颜色是透明的

button {
  border-radius: 0; 
  padding: 0.75em 1em;
  background-color: transparent;
}

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

（当用户点击按钮中的某些内容时，他们点击的内容是 event.target ，而不是按钮。若是按钮内有 HTML 元素，这种风格能够更轻松地处理 click 事件）。

button * {
  pointer-events: none;
}

媒体元素包括 img、 video、 object、 iframe 和 embed。我倾向于让这些元素符合其容器的宽度。

I also set these elements to display: block because inline-block creates unwanted whitespace at the bottom of the element.
我还将这些元素设置为 display: block ，由于 inline-block 在元素的底部建立了不须要的空格。

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

表格

我不多使用表格，但有时它们可​​能颇有用。这是个人默认样式：

table {
  table-layout: fixed;
  width: 100%;
}

当元素具备 hidden 属性时，应该从视图中隐藏它们。 Normalize.css 已经为咱们作了这件事。

[hidden] {
  display: none;
}

这种风格的问题是它的特异性低。

我常常将 hidden 添加到用类设置的其余元素中。类的特异性高于属性，而且 display: none 属性不起做用。

这就是为何我选择用 !important 提升[hidden]的特异性。

[hidden] {
  display: none !important;
}

Noscript

若是一个组件须要 JavaScript 才能工做，我会添加一个 <noscript> 标签让用户知道（若是他们已经禁用了JavaScript）。

这样为 <noscript> 标记建立默认样式：

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

总结

不少人对我提到的这些样式风格感兴趣。这个连接是我在 Github 的 CSS Resets 仓库（https://github.com/zellwk/css...）。

本文首发微信公众号：jingchengyideng

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

---

---

欢迎继续阅读本专栏其它高赞文章：

• 12个使人惊叹的CSS实验项目
• 世界顶级公司的前端面试都问些什么
• CSS Flexbox 可视化手册
• 过节很无聊？仍是用 JavaScript 写一个脑力小游戏吧！
• 从设计者的角度看 React
• CSS粘性定位是怎样工做的
• 一步步教你用HTML5 SVG实现动画效果
• 程序员30岁前月薪达不到30K，该何去何从
• 7个开放式的前端面试题
• React 教程：快速上手指南