What is Reset CSS? Basic Role and Eliminating Unnecessary CSS

Reset CSS is a CSS used to unify the initial styles that differ across browsers. Each browser has its own default styles set for margins, font sizes, list markers, and so on. By resetting these, it becomes easier to achieve a consistent appearance across all environments.

Why Remove Unnecessary CSS?

Since reset CSS is always loaded on every page, including too many styles makes the CSS file bloated. As a result, it can affect page loading speed and lower maintainability.
By removing unnecessary CSS and narrowing it down to the minimum essential reset, this article introduces how to create reset CSS that balances performance improvement and ease of maintenance.

Advantages and Disadvantages of Creating Your Own CSS

Advantages

  • By setting only the minimum necessary styles, the CSS file size becomes smaller, improving page loading speed.
  • Flexible customization is possible to match your site’s design and structure, making it easier to apply your own style rules.
  • Removing unnecessary styles makes later fixes and maintenance easier and improves code readability.
  • The process of creating your own CSS deepens your understanding of CSS, offering a learning effect that leads to more efficient style design.

Disadvantages

  • It is difficult to completely cover subtle differences and bugs across browsers, which may cause visual breaks in specific environments.
  • Beginners in CSS may easily make mistakes such as insufficient resetting or overly aggressive resetting.
  • Compared to well-known reset CSS like Eric Meyer’s Reset or Normalize.css, your own reset CSS may not be widely used and could lack sufficient testing and verification.
  • Sharing with other developers may cause troubles, so caution is necessary in team development.

Tips and Techniques for Creating Lightweight Reset CSS

  1. Reset only truly necessary styles.
    Resetting everything increases waste, so identify which elements your site actually uses.
  2. Avoid indiscriminate resetting of all elements.
    For example, resetting all with the * selector can degrade performance or cause unintended effects.
  3. Set box-sizing: border-box.
    This simplifies box size calculations and prevents layout breaks.

Differences in Default Browser Styles and Optimization Measures

Browsers have different default styles; for example, Firefox applies larger margins to button elements, and Chrome handles link underlines differently. Custom reset CSS addresses typical differences with effective measures like the following.

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}

This helps unify the appearance of form elements and links to some extent.

Practical Examples and Usage of Lightweight Custom Reset CSS

Below is an example of CSS custom-made for a typical blog site that does not use forms or similar elements. Unnecessary CSS is minimized and only the essentials are selected. When using it, paste the minified CSS at the bottom directly into your common.css or similar files.

Our Site’s Custom Reset CSS Code


/*
 * Basic reset for all elements
 * Sets margin and padding to 0 and box-sizing to border-box,
 * including padding and border in width and height calculations.
 * This makes layout calculations more intuitive.
 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
 * Text size adjustment and color scheme setting for the html element
 * -webkit-text-size-adjust: 100%; disables automatic text resizing on mobile browsers.
 * color-scheme: dark light; adapts the browser’s default UI (form controls, etc.)
 * to dark or light mode based on the user’s OS setting.
 */
:where(html) {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark light;
}

/*
 * Reset styles for specific HTML elements
 * Reset borders, fonts, and backgrounds to defaults and inherit from parent,
 * achieving consistent appearance and easing further styling.
 */
:where(div, span, a, p, img, ul, li, h1, h2, h3, section, article, nav, header, footer, main, table, tr, td, th, video, audio, iframe) {
  border: 0;
  font: inherit;
  background: transparent;
}

/*
 * Reset list styles
 * Remove default list styles (bullets, numbers) from ul and li elements.
 */
:where(ul, li) {
  list-style: none;
}

/*
 * Reset table elements
 * border-collapse: collapse; merges borders between cells.
 * border-spacing: 0; removes spacing between cells.
 */
:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
 * Reset anchor elements (links)
 * Remove underline with text-decoration: none;
 * inherit text color from parent with color: inherit;
 * change cursor to pointer to indicate clickability.
 */
:where(a) {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/*
 * Styles on anchor hover and focus
 * Provide visual feedback by lowering opacity on hover or focus.
 */
:where(a:hover, a:focus) {
  opacity: 0.7;
}

/*
 * Reset media elements and support responsive design
 * max-width: 100%; prevents images/videos from exceeding parent width.
 * height: auto; maintains aspect ratio with automatic height.
 * display: block; removes bottom whitespace caused by inline element baseline alignment.
 */
:where(img, video, audio, iframe) {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Basic styles for the body element
 * line-height: 1.5; improves text readability by setting line height.
 * font-family sets site fonts, prioritizing "Noto Sans JP", then system-ui and sans-serif.
 * -webkit-font-smoothing: antialiased; smooths font rendering on WebKit browsers.
 */
:where(body) {
  line-height: 1.5;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

Minified Custom Reset CSS (Feel free to customize and use)

/* Source: https://bukiusagi.net/ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}:where(div,span,a,p,img,ul,li,h1,h2,h3,section,article,nav,header,footer,main,table,tr,td,th,video,audio,iframe){margin:0;padding:0;border:0;font:inherit;background:transparent}:where(ul,li){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(a){text-decoration:none;color:inherit;cursor:pointer}:where(a:hover,a:focus){opacity:.7}:where(img,video,audio,iframe){max-width:100%;height:auto;display:block}:where(body){line-height:1.5;font-family:"Noto Sans JP",system-ui,sans-serif;-webkit-font-smoothing:antialiased}

By resetting only the necessary elements and focusing on basic styles like this, file size becomes smaller and loading speed improves.
As a usage tip, it is important to refine your reset CSS project by project to create the most suitable reset CSS for yourself.

What is :where() in CSS?

The :where() pseudo-class in CSS is a very useful feature that groups multiple selectors together while setting specificity to zero. This improves CSS maintainability and makes overriding easier to manage.

Why is :where() Convenient?

Normally, CSS specificity is determined by the type and number of selectors. For example, div p has higher specificity than p, and an #id selector has higher specificity than a class selector. Styles with higher specificity override those with lower specificity.

However, when using :where(), no matter how complex the selectors inside it are, their specificity is treated as zero. This is a very powerful advantage when creating reset CSS or utility classes.

Pitfalls of Reset CSS and Points to Consider for Lightweighting

  • Excessive resetting may cause unintended design breakage.
    For example, resetting all styles on images or form elements can remove useful default browser functions.
  • Overusing the * selector can degrade overall site performance.
  • Be careful about reduced maintainability.
    Since reset CSS affects the entire site, over-lightweighting that omits necessary resets can cause browser inconsistencies to reappear.