Reduce page weight and simplify code overhead with a minimal CSS reset.Jump To The Code
What Is A CSS Reset?
A CSS reset is a snippet of CSS code typically placed at the beginning of the CSS cascade meant to set, reset or 'normalize' default styling to establish a predictable starting point for further customization and improve consistency between browsers.
CSS resets in one form or another are a common part of the CSS code that styles the content we see on websites and are often the first piece of CSS code included in website development projects. Some popular CSS resets have been integrated into front end web development frameworks.
There are any number of potential ways to approach and configure a CSS reset, and they can vary widely in their intended scope - from a few basic styles to remove default browser styling to more a comprehensive and detailed effort to make HTML elements more uniform between browsers.
Given the way modern web browsers and web standards continue to converge toward a more consistent interpretation and rendering of HTML elements and the CSS that styles them, existing well-known CSS resets may be more robust than necessary, particularly for custom designs. A small CSS reset is an easy way to simplify CSS overhead.
A Simpler Alternative
This minimal CSS reset is designed to remove some default styling on frequently-used elements and add a few common base styles:
Obviously any tags or styles can be added, adjusted or omitted as needed, but as is this small CSS reset includes some opinions - particularly what is included and what is omitted.
These few lines focus on the HTML tags most commonly-used for a modern website build, with the assumption that other tags will be added as needed - or simply styled later in subsequent custom CSS.
Perhaps most notable of what is omitted is applying
box-sizing:border-box to all elements as is often done with the
* universal selector.
Many popular CSS resets include a declaration to set all elements to use
box-sizing:border-box rather than the default
content-box value. Since it will most likely be needed only occasionally, it can be added only where needed.
The very last declaration -
font-size:1.25em - may be the most opinionated.
Given that most web browsers use a default base font size of 16px,
font-size:1.25em increases that value to 20px, which is both highly legible and also a good basis for em-based sizing, with each .05em equivalent to 1px.
Using a relative value like this rather than an absolute pixel value allows content to scale appropriately depending on the browser base font size and scaling/zooming of the page, both of which should remain adjustable by the user.
Minimize Critical CSS
Along with simplifying and streamlining the CSS code overhead, using a minimal CSS reset like this helps reduce the critical CSS resources needed to render the initially-visible or above-the-fold parts of a page.
Learn more about how to limit render blocking resources and improve page speed by managing critical and non-critical resources:Loading Structure