Translation: Crazy geek

Original text: medium.freecodecamp.org/how-i-style…

Many front-end developers are using Normalize to style their websites. Some people like to add their own style preferences to normalize.css, and SO do I.

In this article, I’ll share with you my own CSS reset project (I use them in addition to normalize.css).

I divided the reset items into eight categories:

  1. The box size

  2. Remove margins and padding

  3. The list of

  4. Tables and buttons

  5. Image and embedded video

  6. form

  7. Hidden attribute

  8. Noscript

Resize the box

The box-sizing property changes the way CSS box models work. It changes how width, height, padding, border, and margin are computed.

The default setting for box-sizing is Content-box. I prefer to change it to border-box because it’s easier to set the padding and width.

For more information 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 margins and padding

Margin and padding are defined differently by browser. When I don’t know this, the default Settings let me down. But I prefer to code all the margins and padding 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;
}
Copy the code

The list of

I use unordered lists in many cases, and in many cases I don’t need disc styles. Here I set list-style to None. When I need a DISC style, I set it manually on a specific

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

Forms and buttons

Browsers do not inherit form and button layout. They set font to 400, 11px system-ui. I think it’s incredible and strange. So I always have to manually make them inherit styles from the ancestor element.

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

Different browsers have different border styles for form elements and buttons. I really don’t like these default styles and would rather set them to 1px solid Gray.

input.textarea.button {
  border: 1px solid gray; 
}
Copy the code

I made a few tweaks to the button:

  1. The button on thepaddingSet to0.75 em 和 1emBecause this seems to be more consistent with the reasonable defaults in my experience.
  2. Removed the default applied to buttonsborder-radius 。
  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 set pointer-events: None to the element inside the button. This is primarily used for JavaScript interaction.

(When users click on something in a button, they click on the event. Target, not the button. This style makes it easier to handle click events if the button has HTML elements).

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

Media elements include IMG, video, Object, iframe, and embed. I prefer these elements to fit the width of their container.

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

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

form

I rarely use forms, but sometimes they can be useful. This is my default style:

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

When elements have hidden attributes, 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 its low specificity.

I often add hidden to other elements set with the class. Classes are more specific than attributes, and the display: None attribute does not work.

That’s why I chose to use it! Important improves the specificity of [hidden].

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

Noscript

If a component requires JavaScript to work, I add a

Create a default style for the

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

conclusion

Many people are interested in the styles I mentioned. This link is my repository of CSS Resets on Github (github.com/zellwk/css-…

Welcome to pay attention to Beijing cheng Yideng public number: Beijing Cheng Yideng, get more front-end dry goods.