strong
tags, larger text for h1
titles etc. Unfortunately, vendors love making our lives complicated and each browser uses a different base. So how can you ensure your custom CSS is not affected by a default style implemented on a specific device?
Enter CSS resets. These strip most styles so elements are rendered consistently across browsers. Typically, all fonts and line heights revert to 100%, margins and padding are set to 0px, borders are removed, and ordered/unordered lists become unstyled.
Eric Meyer’s CSS Reset was one of the first and is the most well known and used. The HTML5 Reset Stylesheet from HTML5 doctor can also help style newer elements. There are several others — CSSReset.com
provides a great selection and documentation.
Do you use a CSS reset? Should you?
I’ve looked at a random collection of 30 websites and the majority used a CSS reset. The advantages are clear:- They provide a blank canvas; any styles applied are (almost) certain to be your own.
- Development can be more logical: you’re adding styles rather than removing or modifying them.
- Browser compatibility issues can be minimized.
* { padding: 0; margin: 0; }
This affects every tag and some developers will tell you it causes havoc or slower CSS processing. I’m yet to encounter a situation where it’s become problematical.
My main issues with CSS resets are:
Additional page weight
Most CSS resets add around 2Kb of code (uncompressed). That may not sound much but it’s a large overhead when the majority of my CSS files rarely exceed 10Kb.
Additional effort
A CSS reset requires you to re-style all your elements — which adds further weight to your file. Sometimes though, I’m happy with the browser’s defaults. Font weights, line heights, link outlines, bullet discs and other styles are often fine. If they’re not, I’ll change them accordingly.
Different browsers render pages differently
No two browsers are the same yet some people expect pixel-perfect rendering across all devices. CSS resets often give the impression that this goal is achievable. It’s not.
Personally, I don’t mind if titles in Firefox are 2px larger than IE or Opera’s idea of ‘bold’ is slightly heavier than Chrome’s. A CSS reset will never resolve those issues for you.
They don’t negate the need for browser testing
I’m not convinced CSS resets aid browser consistency. You must test your site or application in as many devices as possible so you can address errors and bugs caused by your code or the browser.
They don’t fit with my workflow
I’m not a fan of CSS frameworks. I rarely encounter situations where a generic CSS approach applies to the site being built. I may copy a few code snippets from elsewhere but, in general, I prefer to start with an empty file. It remains my code and I know exactly where to go when bugs arise.
Although it’s not as complex, a CSS reset is a framework which can introduce unexpected results.
They don’t save time
Has a CSS reset ever saved you hours of development time?
Before I’m attacked by an angry mob of CSS reset fans, I’m not saying you should never use them. They may they work for you and that’s fine. I suspect they’re also useful to those who are new to web development. However, are you adding a CSS reset because it’s genuinely useful or has it become a development habit?
As a test, try removing the reset styles from your website to see if it makes a significant difference.
Do you use CSS resets? Have you recently adopted or dropped the practice? Do they help?
Frequently Asked Questions (FAQs) about CSS Resets
What is the main purpose of a CSS reset?
A CSS reset is a method used to reduce browser inconsistencies in things like default line heights, margins, and font sizes of headings, and so on. The general reasoning behind a CSS reset is that it allows developers to start with a clean slate and style their websites or web applications with fewer unexpected browser inconsistencies. It essentially forces all browsers to have all their styles reset to null, avoiding browser-specific defaults.
Are CSS resets still relevant today?
Yes, CSS resets are still relevant today. While modern browsers have become more consistent in their default styling, there are still differences that can crop up, especially when dealing with more complex designs. A CSS reset can help ensure that your design looks as similar as possible across different browsers.
How do I implement a CSS reset?
Implementing a CSS reset is quite straightforward. You simply include the CSS reset styles at the top of your CSS file. This ensures that the reset styles are applied before any of your custom styles. There are several popular CSS resets available, such as Meyer’s Reset CSS and Normalize.css, which you can copy and paste into your CSS file.
What is the difference between a CSS reset and Normalize.css?
A CSS reset aims to reduce browser inconsistencies by setting all HTML elements’ styles to ‘zero’ or null. On the other hand, Normalize.css is a modern, HTML5-ready alternative to CSS resets. It makes a range of reasonable defaults rather than ‘unstyling’ everything. It also corrects some common bugs that are out of scope for a traditional reset.
Can a CSS reset affect the performance of my website?
A CSS reset can slightly increase your CSS file size, which could potentially affect your website’s performance. However, the impact is usually minimal and is often outweighed by the benefits of using a CSS reset, such as improved cross-browser consistency.
Is it necessary to use a CSS reset for every project?
It’s not strictly necessary to use a CSS reset for every project. However, it’s generally a good practice to use one, especially for larger projects, as it can help avoid unexpected styling issues caused by browser defaults.
Can I customize a CSS reset to fit my needs?
Yes, you can certainly customize a CSS reset to fit your needs. In fact, it’s a common practice to tweak the reset styles to better match the needs of your project. For example, you might want to modify the reset styles for certain elements, or add additional styles for elements that aren’t covered by the reset.
What are some alternatives to using a CSS reset?
Besides using a CSS reset, there are other methods to handle browser inconsistencies. One popular alternative is using a CSS normalizer like Normalize.css. Another method is using a CSS framework like Bootstrap or Foundation, which usually include their own version of a CSS reset or normalize.
How does a CSS reset affect the user experience?
A CSS reset can improve the user experience by ensuring that your website or web application looks consistent across different browsers. This can make your design more predictable and easier to use, which can lead to a better overall user experience.
Can I use a CSS reset with a preprocessor like Sass or Less?
Yes, you can use a CSS reset with a preprocessor like Sass or Less. You would typically include the reset styles at the top of your main Sass or Less file, just like you would in a regular CSS file.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.