Modern and Minimal CSS Reset

css-reset.css

/* Modern and Minimal CSS Reset */

/* Remove default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set base font properties */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
  scroll-behavior: smooth; /* Enable smooth scrolling */
}

/* Set base styles for common elements */
body {
  margin: 0;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
}

/* Remove default quotes from blockquotes and q */
blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

/* Set border box sizing for all elements */
*, *::before, *::after {
  box-sizing: inherit;
}

/* Remove text decoration from links */
a {
  text-decoration: none;
  color: inherit; /* Inherit color from parent */
}

/* Remove default button styles */
button,
input,
select,
textarea {
  font-family: inherit; /* Inherit font from parent */
  font-size: inherit; /* Inherit font size from parent */
  line-height: inherit; /* Inherit line height from parent */
  color: inherit; /* Inherit color from parent */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Ensure media elements display as block */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%; /* Ensure media elements do not exceed their container's width */
}

/* Remove default table styles */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Ensure form elements inherit font styles */
button,
input,
optgroup,
select,
textarea {
  margin: 0; /* Remove default margins */
}

/* Set base box sizing */
html {
  box-sizing: border-box;
}

/* Remove default fieldset border */
fieldset {
  border: none;
}

/* Make sure hidden elements stay hidden */
[hidden] {
  display: none;
}

Explanation

1. Universal Selector (*): Resets margin and padding for all elements and sets box-sizing to border-box for predictable element sizing.
2. HTML Element: Sets the base font family, line height, and smooth scrolling.
3. Body Element: Removes the default margin.
4. List Elements: Removes the default list styling.
5. Blockquote and Q Elements: Removes default quotation marks.
6. Box-sizing: Ensures all elements and their pseudo-elements use border-box.
7. Anchor Elements (a): Removes text decoration and ensures links inherit colour.
8. Form Elements: Normalises styles for form elements by removing default styling and ensuring they inherit font styles.
9. Media Elements: Ensures media elements like img and video are displayed as block and do not exceed their container’s width.
10. Table Elements: Resets table styles for a consistent layout.
11. Fieldset: Removes the default border.
12. Hidden Attribute: Ensures elements with the hidden attribute are not displayed.

This reset provides a solid foundation for a modern web project, ensuring consistency and a clean slate for further styling.