Photo by Lauren Mancke of Unsplash

Many front-end developers have started using Normalize to design their websites. Some of these developers have personal preferences that they add to normalize.css. I also have my own preferences.

In this article, I want to share with you my own personalized CSS reset Settings (which I added as an extra to normalize.css).

I’ve divided these style resets into the following eight categories:

  1. The box model
  2. Remove inner and outer margins
  3. The list of
  4. Forms and buttons
  5. Image and embedded labels
  6. form
  7. Hidden attribute
  8. Disabling JAVASCRIPT scripts

The box model

The box-sizing property specifies how the CSS works. It will change how properties such as width, height, padding, border, and margin are computed.

Box-sizing defaults to Content-box and I prefer to change it to border-box because it makes it easier to define the padding and width.

For more on Box Sizing, you might be interested in Understanding Box Sizing.

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

Remove inner and outer margins

Browsers set different margins and inner margins for different elements. These defaults annoy me when I don’t need them. I prefer to manually set all the margins and padding myself when coding.

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

The list of

I use unordered lists in a lot of situations, and most of the time I don’t need disc styles. So I’ll set list-style to None. Where the disc style is needed, manually set it to the specific

    tag. 
/* Removes discs from ul */
ul {
  list-style: none;
}
Copy the code

Forms and buttons

Browsers do not inherit the formatting of forms and buttons. It will set the font to 400, 11px system-UI. I find this a little confusing and weird, and I always manually make them inherit these styles from their parent elements.

input.textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}
Copy the code

I also made some changes to the style of the buttons:

  1. Set the inner margin of the button to0.75 em 和 1emIn my experience, this is a reasonable default
  2. Clear button on defaultborder-radiusstyle
  3. Force the background color to be transparent
button {
  border-radius: 0; 
  padding: 0.75 em 1em;
  background-color: transparent;
}
Copy the code

Finally, I’ll set pointer-events: None to the element inside the button. This is primarily for JavaScript interaction.

(When the user clicks on an element within a button, event.target is the element clicked, not the button. This style makes it easier to handle click events with HTML elements inside the button.

button * {
  pointer-events: none;
}
Copy the code

Media elements including images, video, objects, iframe, and embed. I prefer these elements to fit the width of the parent container.

I’ll also set these elements to display: block because inline-block creates unnecessary Spaces at the bottom of the element.

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

form

I rarely use them, but sometimes they can be useful. This is the default style I set:

table {
  table-layout: fixed;
  width: 100%;
}
Copy the code

When elements have the hidden property, they should be hidden from the view. Normalize.css already does this for us.

[hidden] {
  display: none;
}
Copy the code

The problem with this style is that it has a low priority.

I often add hidden to elements that I style with the class selector. The class selector takes precedence over the property selector, and the display: None property has no effect.

That’s why I use it! Important to raise the priority of [hidden].

[hidden] {
  display: none ! important;
}
Copy the code

Disabling JAVASCRIPT scripts

If a component requires JavaScript to work properly, I add a

This creates the default style for the

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

conclusion

Everyone starts the project slightly differently. Feel free to use the styles I mentioned. This is my Github repository for my personal CSS Resets.

Do you have any suggestions to help improve this CSS reset file? If so, please feel free to contact me!

Thanks for reading. Did this article help you? If so, I hope you can [share](twitter.com/share?text=… CSS reset by @zellwk 👇 &url=zellwk.com/blog/css-re… You may be able to help others. Thank you very much!