Use CSS reset style website

Many front-end developers are using Normalize for their website design style. Some people like to add some of their own preferences in style in Normalize.css, me too.

In this article, I will share my own CSS reset items with you (except Normalize.css I still use them).

I will reset items are divided into eight categories:

1. The size of the box
2. Remove margins and padding
3. list
4. tables and buttons
5. images and embedded video
6. Table
7. hidden attribute
8..Noscript

Adjust the box size

box-sizing property to change the mode of operation of the CSS box model. It will change the calculation width, height, padding, border and margin of ways.

The default setting box-sizing is content-box. I prefer to change it to border-box, because it is easier to set up padding and width ..

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路

Delete margins and padding

Browser vary for different elements margin and padding settings. When these I do not know, the default settings will let me down. But I prefer to set all margins and padding through their 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;
}

List

I use an unordered list in many cases, and in many cases do not require disc style. Here I will list-style set to none. When I need disc style, it will be on hand to set it in a particular <ul>.

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

Forms and buttons

The browser will not inherit the layout forms and buttons. They would font set to 400 11px system-ui. I think it is incredible and strange. So I always have to manually make them inherit style from ancestor elements.

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

Different browsers set a different border styles to form elements and buttons. I do not like the default style, rather they are set to 1px solid gray.

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

I made some adjustments on the button:

The button padding set to 0.75em and 1em, because it seems more in line with reasonable default value in my experience.
Delete the default button is used in border-radius.
Mandatory background color is transparent

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

Finally, I would pointer-events: none to elements within the button. This is primarily for JavaScript interaction.

(When the user clicks a button in something, they click the content is event.target, instead button. If there are elements within the HTML button, this style makes it easier to handle the click event).

button * {
  pointer-events: none;
}

Media elements including img, video, object, iframe and embed. I tend to make these elements fit the width of its container.

I also set these elements to display: block because inline-block creates unwanted whitespace at the bottom of the element.
I will set them up as display: block, because the inline-block elements at the bottom of unwanted spaces created.

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

form

I rarely use the form, but sometimes they can be very useful. This is my default styles:

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

When the hidden element has attributes, which should be hidden from view. Normalize.css have done it for us.

[hidden] {
  display: none;
}

This style of problem is its low specificity.

I often add hidden to other elements with class settings. Higher specificity than class attributes and display: none property does not work.

That's why I chose to use! Important to improve [hidden] specificity.

[hidden] {
  display: none !important;
}

Noscript

If a component requires JavaScript to work, I will add a <noscript> tag to let the user know (if they have disabled JavaScript).

Such markers create a default style for the <noscript>:

/* noscript styles */
noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}
web前端开发学习Q-q-u-n： 784783012 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路