Reset CSS

Feb 29, 2020 • ☕️ 1 min read

In the CSS Reset way, we define all HTML tags to have no padding, no margin, no border, the same font-size and the same alignments.

The problem with CSS Resets is that they are ugly: they have a big chain of selectors, and they make a lot of unnecessary overrides. And even worse, they are unreadable when debugging.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Reading More

Extending standard CSS by preprocessors

CSS preprocessors empower CSS with variables, nesting, inheritance, mixins, functions, and mathematical operations

WebAssembly - The next Big Thing in Tech

An overview of what WebAssembly (Wasm) is, how it works, and it's current position in the web development stack

My Top 10 Favorite React Open Source Libraries

Create React App, Styled Components, Material UI, Next.js, Gatsby, Typography.js, React Admin, Formik, Enzyme, React Markdown

The Need of CSS Style Guides

On following a CSS style guide to write sane, manageable and scalable code