Minireset.css - A tiny modern CSS reset

Apr 27, 2021reviewscss-resetscss

minireset.css is a CSS reset library similar to Original Reset CSS by Eric A. Meyer but a bit more modern when released as npm package. It has following key features:

  • Resets the font sizes: using semantic markup doesn’t affect the styling
  • Resets the block margins: the spacing is only applied when you need it
  • Resets tables: tabular data only takes the space it needs
  • Preserves the inline paddings: buttons and inputs keep their default layout
  • Sets the border-box box sizing: borders and paddings don’t affect the set dimensions
  • Sets responsive media elements: images and embeds scale with the browser width

Getting started by install npm package npm install minireset.css or copy following direct stylesheet into your project.

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}