Universal CSS template for global styles

Question

I 'm trying to create a universal CSS template for global styles. I can not find unambiguous recommendations. After inspecting various sites, I have compiled the following template . I ask your advice . Thank you!

*,
*:after,
*:before {
 box-sizing: border-box;
}
html,
body {
 overflow-x: hidden;
 overflow-y: hidden;
 width: 100%;
 height: 100%;
}
html {
 font-size: 62.5%;
 // background-color: x;
}
body {
 position: relative;
 z-index: 0;
 min-height: 100%;
 color: x;
 background-color: x;
 font-family: x;
 font-size: 1.6rem;
 font-weight: x;
 font-style: normal;
 line-height: x;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
}
.wrapper {
 margin: 0 auto;
 min-width: 320px;
 padding: x;
}

• fracz: What do you want to get from such universal CSS template? Have you seen normalize.css or similar ones?
• Ishimura: Yes, I use normalize.css. Do you think that it contains everything you need to start ? Can I ask you what styles for html and body you normally use in your projects ?
• fracz: It's bootstrap typically. Not only it normalizes the CSS but also provides you with tons of predefined nicely looking styles and components.
• Ishimura: I try to avoid using css frameworks , but thanks for the advice

Answer 1

I can not find unambiguous recommendations. After inspecting various sites, I have compiled the following template

The canonical example domain exists for such a purpose. Here is its style declaration:

body {
 background-color: #f0f0f2;
 margin: 0;
 padding: 0;
 font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div {
 width: 600px;
 margin: 5em auto;
 padding: 50px;
 background-color: #fff;
 border-radius: 1em;
}
a:link, a:visited {
 color: #38488f;
 text-decoration: none;
}
@media (max-width: 700px) {
 body {
 background-color: #fff;
 }
 div {
 width: auto;
 margin: 0 auto;
 border-radius: 0;
 padding: 1em;
 }
}

• Toby Speight: You have presented an alternative solution, but haven't reviewed the code. Please edit to show what aspects of the question code prompted you to write this version, and in what ways it's an improvement over the original. It may be worth (re-)reading How to Answer.
• Toby Speight: And I'm pretty sure that's not the purpose of example.org, example.com and friends - any stylesheet served by their HTTP server is purely incidental rather than pedagogic.