如何用自己喜欢的 CSS 风格重置网站的样式

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

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

我将 reset 项分为8类：

盒子大小

删除边距和填充

列表

表格和按钮

媒体元素

表格

隐藏属性

Noscript

调整盒子大小

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

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

有关 Box Sizing 的更多信息，你可能对“了解Box大小”(https://zellwk.com/blog/understanding-css-box-sizing/)感兴趣。

1html{

2box-sizing: border-box;

3}

4*,

5*::before,

6*::after{

7box-sizing: inherit;

8}

删除边距和填充

浏览器对不同元素 margin 和 padding 的设置各不相同。当我不了解这些时，默认设置会让我失望。但是我更喜欢通过自己编码设置所有边距和填充。

1/* Reset margins and paddings on most elements */

2body,

3h1,

4h2,

5h3,

6h4,

7h5,

8h6,

9ul,

10ol,

11li,

12p,

13pre,

14blockquote,

15figure,

16hr{

17margin:0;

18padding:0;

19}

列表

我在很多情况下都使用无序列表，而且很多情况下都不需要 disc 样式。在这里我将 list-style 设置为 none 。当我需要 disc 样式时，会在特定的

上手动设置它。

1/* Removes discs from ul */

2ul{

3list-style: none;

4}

表单和按钮

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

1input,

2textarea,

3select,

4button{

5color: inherit;

6font: inherit;

7letter-spacing: inherit;

8}

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

1input,

2textarea,

3button{

4border:1pxsolid gray;

5}

我对按钮做了一些调整：

将按钮的 padding 设置为 0.75em 和 1em ，因为这看起来更符合我经验中的合理默认值。

删除了应用于按钮的默认border-radius 。

强制背景颜色是透明的

1button{

2border-radius:0;

3padding:0.75em1em;

4background-color: transparent;

5}

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

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

1button* {

2pointer-events: none;

3}

媒体元素

媒体元素包括 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 在元素的底部创建了不需要的空格。

1embed,

2iframe,

3img,

4object,

5video{

6display: block;

7max-width:100%;

8}

表格

我很少使用表格，但有时它们可能很有用。这是我的默认样式：

1table{

2table-layout: fixed;

3width:100%;

4}

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

1[hidden]{

2display: none;

3}

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

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

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

1[hidden]{

2display: none!important;

3}

Noscript

如果一个组件需要 JavaScript 才能工作，我会添加一个 标签让用户知道（如果他们已经禁用了JavaScript）。

这样为 标记创建默认样式：

1/* noscript styles */

2noscript{

3display: block;

4margin-bottom:1em;

5margin-top:1em;

6}

总结

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

十五年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流Q群：296212562，即可免费获取。