css样式重置_如何使用我最喜欢CSS重置来设置网站样式

css样式重置

Many frontend developers begin styling their websites with Normalize. Some developers have personal preferences that they add on to Normalize.css. I have my preferences, too.

许多前端开发人员开始使用Normalize对网站进行样式设置。 一些开发人员具有添加到Normalize.css的个人偏好。 我也有我的偏好。

In this article, I want to share these preferences with you, my personal CSS reset (that I use in addition to Normalize.css).

在本文中，我想与您分享这些首选项，即我的个人CSS重置(除了Normalize.css之外，我还使用了这些重置)。

I categorize the resets into 8 categories:

我将重置分为8类：

1. Box sizing

1.盒子大小

2. Removing margins and paddings

2.删除边距和填充

3. Lists

3.清单

4. Forms and buttons

4.表格和按钮

5. Images and embeds

5.图像和嵌入

6. Tables

6.桌子

7. The hidden attribute

7.隐藏的属性

8. Noscript

8. Noscript

装箱尺寸 (Box Sizing)

The box-sizing property changes how the CSS Box model works. It changes how width, height, padding, border, and margin properties are calculated.

box-sizing属性更改CSS Box模型的工作方式。 它更改了width ， height ， padding ， border和margin属性的计算方式。

The default setting for box-sizing is content-box. I prefer changing this to border-box because it’s easier for me to style padding and width.

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

For more info on Box Sizing, you might be interested in “Understanding Box sizing”.

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

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

删除边距和填充 (Removing margins and paddings)

Browsers set different margins and paddings for different elements. These default settings throw me off when I’m not aware. When I code, I prefer to set all margins and paddings myself.

浏览器为不同的元素设置不同的边距和填充。 当我不知道时，这些默认设置会让我失望。 在编写代码时，我更喜欢自己设置所有边距和填充。

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

清单 (Lists)

I use unordered lists in many situations, and I don’t need a disc style in most of them. Here, I set list-style to none. When I need the discstyle, I set it back manually on the specific <ul>.

在许多情况下，我都使用无序列表，并且在大多数情况下，我不需要disc样式。 在这里，我将list-style设置为none。 当我需要disc样式时，可以在特定的<ul>上手动将其重新设置。

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

表格和按钮 (Forms and buttons)

Browsers don’t inherit typography for forms and buttons. They set font to 400 11px system-ui. I find this mind-boggling and weird. I always have to make them inherit from ancestor elements manually.

浏览器不会继承表单和按钮的字体。 他们将font设置为400 11px system-ui 。 我发现这令人难以置信和奇怪。 我总是必须使它们手动继承自祖先元素。

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

Different browsers have styled the borders for forms elements and buttons differently. I dislike these default styles, and would prefer to set them to 1px solid gray.

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

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

I made a few more adjustments to buttons:

我对按钮做了一些调整：

1. Set button padding to 0.75em and 1em because they seem like sensible defaults from my experience.

   将按钮填充设置为0.75em和1em因为根据我的经验，它们似乎是明智的默认设置。

2. Removed the default border-radius that’s applied to buttons.

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

3. Forced background color to be transparentbutton {   border-radius: 0;    padding: 0.75em 1em;   background-color: transparent; }
   强制背景颜色为透明按钮{border-radius：0; 填充：0.75em 1em; 背景色：透明； }

Finally, I set pointer-events: none to elements within a button. This is mainly used for JavaScript interaction.

最后，我将pointer-events: none设置pointer-events: none 。 这主要用于JavaScript交互。

(When users click on something in a button, event.target is the thing they clicked on, not the button. This style makes it easier to work with click events if there are HTML elements inside a button).

(当用户单击按钮中的某物时， event.target是他们单击的东西，而不是按钮。如果按钮中有HTML元素，则这种样式使处理click事件更加容易)。

css button * {   pointer-events: none; }

Media elements include images, videos, objects, iframes, and embed. I tend to let these elements conform to the width of their containers.

媒体元素包括图片，视频，对象，iframe和嵌入。 我倾向于让这些元素符合其容器的宽度。

I also set these elements to display: block because inline-blockcreates unwanted whitespace at the bottom of the element.

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

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

桌子 (Tables)

I rarely use tables, but they may be useful sometimes. Here’s the default styles I’ll begin with:

我很少使用表，但是有时它们可​​能会有用。 这是我将开始使用的默认样式：

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

When an element has a hidden attribute, they should be hidden from view. Normalize.css does this for us already.

当元素具有hidden属性时，应将其隐藏。 Normalize.css已经为我们做到了。

[hidden] {
  display: none;
}

The problem with this style is its low specificity.

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

I often add hidden to other elements I style with a class. A class’s specificity is high than an attribute, and the display: none property doesn’t work.

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

This is why I opt to bump up [hidden]'s specificity with !important.

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

[hidden] {
  display: none !important;
}

Noscript (Noscript)

If a component requires JavaScript to work, I’ll add a <noscript> tag to let users know (if they’ve disabled JavaScript).

如果组件需要JavaScript才能工作，我将添加一个<noscript>标记以告知用户(如果他们已禁用JavaScript)。

This creates default styles for the <noscript> tag.

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

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

结语 (Wrapping up)

Everyone begins their projects differently. Please feel free to use any of these styles I mentioned. Here’s a Github repo of my personal CSS Resets.

每个人以不同的方式开始他们的项目。 请随意使用我提到的任何这些样式。 这是我的个人CSS重置的Github存储库 。

Do you have any recommendations that would help improve this CSS Reset file? If you do, feel free to reach out and let me know!

您是否有任何建议可以帮助改进此CSS重置文件？ 如果这样做，请随时与我们联系！

Thanks for reading. Did this article help you out? If it did, I hope you consider sharing it. You might help someone else out. Thanks so much!

谢谢阅读。 这篇文章对您有帮助吗？ 如果确实如此，希望您考虑共享它 。 您可能会帮助别人。 非常感谢！

---

---

This article was originally posted at my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.

本文最初发布在我的博客上 。 如果您想获得更多文章来帮助您成为更好的前端开发人员，请注册我的时事通讯 。

翻译自: https://www.freecodecamp.org/news/how-i-style-my-websites-with-my-favorite-css-resets-7ace41dbc43d/

css样式重置