Full (well, almost, hopefully) guide to CSS Reset libraries
Photo by Sasha ? Stories on Unsplash
A little bit of an introduction: I became interested in CSS resets for a very practical reason. I am a consultant software engineer and that implies I work with different clients and start greenfield projects from time to time.
At a certain point after creating a few web projects from a scratch several times in a row and running into all the same issues with different browsers, I have developed a certain ?style of work? if I may say so, and adjusting my CSS code in different browsers in a ?fix-as-you-go? manner did not scale for me anymore. So, I decided to take a look at the resets and found them to be way more nuanced than they initially seemed to be.
The more preparation (dev-ops, pipelines, bundling orders) you do beforehand on the project, the more time you save in a long-term, which means having the right initial settings for the reset .css can potentially save you hours of debugging your CSS.
Here is my attempt to collect all the information there possibly is on them and create a comprehensive tutorial and give you some overview.
The root of the problem
Every web project usually starts with a designer creating a web page layout and handing it over to a web developer. I made a fake one for the demonstration purposes.
Some quick design for the demo purposes
And this is what it looks like without styles, just bare HTML.
As you start creating the page, you will be adding CSS styles to your HTML. If you create the whole first section, you can check it out in different browsers, you will notice some tiny discrepancies between them.
This is the design, and this is how it looks in different viewports given that we did not reset
This might not seem like a big deal to you unless you check out mobile browsers (and especially form styles).
The differences in a way browsers render this page with the exact same HTML and CSS layout is more prominent on mobile devices ?
? and even more prominent in forms
These small discrepancies accumulate over time and end up in your website design looking inconsistent throughout the browsers. And that is precisely the reason why people use resets: making it look exactly the same on every browser.
We have never had so little control over the user agents and devices people view our websites in, yet, we have never had so much control over the way we can style our websites.
At that point you would probably google something like this, click on the first link and copy. You should not do that, for many reasons and here is why!
This is a fairly easy topic and a rather beginner information (one of the first things you learn as you start writing CSS), yet this is a very overlooked topic as well.
The implications of ignoring the reset specificities might result in inconsistent design of your application across platforms and browsers, let alone the possibility of long hours lost in debugging CSS.
Why do we need reset CSS?
Imagine you are starting a new project and you type a few HTML tags into your .html file. Let?s take this as an example:
Raw un-styled HTML file, url: https://jsbin.com/tesaxiqeti/edit?html,output
As you open the file in your browser, you probably see some un-styled content that you put into the HTML page. One more great example of this would be the very first website. A curious part of it is that it has zero CSS. Literally. Absolutely none.
How come we see anything, despite no styles being applied? We are used to it, yet, we do not usually think about why browser actually renders the page.
Basically, with absolutely no CSS at all you?ll probably see a blank screen.
Explained in much better words here, every browser has a default ?user agent? stylesheet which gets applied by default to every webpage in every browser. Why? We are not going to dive very deep into how browser critical render path works, nevertheless, you need to know that after your browser has parsed the DOM it needs to have at least some CSS rules in order to draw the HTML elements on your browser screen.
DOM and CSSOM are composed in one single render tree and the layout is being painted afterwards.
Only after the render tree is created, browser starts to draw the elements the following way:
- Run layout on the render tree to compute geometry of each node.
- Paint the individual nodes to the screen.
With absolutely no CSS at all you?ll probably see a blank screen. As mentioned in the official docs:
?User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent?s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.
Note that the user may modify system settings (e.g., system colours) that affect the default style sheet. However, some user agent implementations make it impossible to change the values in the default style sheet. [?]
By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for ?!important? rules. All user and author rules have more weight than rules in the UA?s default style sheet.?
Since browsers have build-in stylesheets (something like this below) they prevent us from seeing a blank screen once we create our HTML code with no CSS code.
You can quite easily check out all the major browsers default stylesheets, or see the list of the most popular here since almost all of them are publicly available.
- Chromium UA stylesheet ? Google Chrome & Opera
- Mozilla UA stylesheet ? Firefox
- WebKit UA stylesheet ? Safari
https://bitsofco.de/a-look-at-css-resets-in-2018/
So, why should we override the default CSS?
Well, if you checked the default browser stylesheets above, it?s quite easy to notice that they are slightly different from each other. In order to reach for the cross browser consistency we need to override the default browser stylesheets with our own default styles.
Default browser stylesheets are different from each other.
As explained in a better way on cssreset.com:
You might wonder what this is all for ? well, it?s simple. From the consistent base that you?ve set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers? differences in their default rendering of HTML can?t touch you!
Of course, you counter-argument would probably be:
Some people claim that this is unnecessary ? that there?s no sense resetting an element?s style, only to un-reset it afterwards. If you did a close up on one element, with a CSS Reset and then further styling, the issue becomes clear:
/* CSS Reset */#element { margin:0; padding:0; font-size:100%; line-height:1; }/* #element rules: */#element { margin:5px 0 10px; font-size:13px; line-height:1.5; }
In many ways, they?re right ? it duplicates effort and processing time, when a single declaration would have sufficed ? many developers and designers feel that this violates the ?DRY? (Don?t Repeat Yourself) principle.
However, there are multiple benefits of this technique that outweigh any drawbacks, not least the more logical development progression that it afford: paste in your CSS Reset, paste in your base styles (if needed), then define everything else from there. It?s also nice to know that you?ve got your bases covered.
Hence every browsers display DOM tree a bit different by default, it sounds like a good idea to reset some default settings in order to make sure web page looks exactly the same on every browser.
This is much safer to include a reset CSS, then not to include.
If you are using some sort of UI library, such as Bootstrap, Foundation, Materialize, then you are all set: they already include initial resets.
Essentially, we want your website to be consistent.
How to find and pick a reset library?
A lot of developers do not really think about WHAT resets they are using in their code. They just download the first library they manage to find and move on. But when it comes to resetting browser CSS, you have a lot of options, even more than you think.
One of the pioneers of the CSS Reset method, Eric Meyer, created a Reset stylesheet back in 2004 that is still in use on millions of websites today. This is not doubt the most popular reset library nowadays. Most people use it in its unedited form, despite Meyer?s recommendation against this:
?The issue is that many people just chuck in any old CSS Reset without modification. Which is bad.?
Source: https://css-tricks.com/poll-results-what-css-reset-do-you-use/
Eric Meyer, when he pioneered the technique of CSS Reset (see Eric Meyer?s Reset CSS), explicitly stated that:
?The reset styles given here are intentionally very generic. There isn?t any default colour or background set for the body element, for example. I don?t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colours for the page, links, and so on.?
In other words, this is a starting point, not a self-contained black box of no-touchiness.
So, even if you are using a reset, it is never a good idea to ?just download it? since you might find yourself with a lot of dragons that look like Easter eggs and some old versions of resets might mess with your project?s CSS.
The Many Ways to reset your CSS
Back in 2007 Jeff Starr rounded up a bunch of different CSS resets. A few things have changed and improved since then, and in this article I will provide you with different reset libraries from the smallest to the biggest one, feel free to pick your own favourite. Soon you will see, the truth is
All the CSS resets are opinionated.
As it turns out, this fact has already been pointed out by Chris Coyier in his CSS-Tricks article . In order for you to see I created a small demo based on an idea from Daniel Box :
CodePen Embed – Reset.css Test
HTML5 Kitchen Sink Jump to: Headings | Sections | Phrasing | Palpable Content | Embeds | Forms | Tables This section?
codepen.io
Option 1: Universal Selector ?*? Reset
URL: https://cssreset.com/scripts/universal-selector-css-reset/
This is the most straightforward and concise way to do your reset.
* { margin: 0; padding: 0;}
or a bit ?fancier? version of it:
* { margin: 0; padding: 0; border: 0; outline: 0;}
In case if you do not want to include any resets at all, it is still a good idea to reset margins and paddings. It will save you a lot of CSS tweaks later.
NB: Resetting outlines should not be included, focus styles should not be removed, only replaced (because accessibility).
Option 2: Tantek Celik`s undohtml.css
URL: https://cssreset.com/scripts/undohtml-css-tantek-celik/
A very minimal reset with a few improvements over the Universal Selector ?*? Reset.
The only file I managed to find was dated back to 2004 but from the HTML point of view not much changed since then. This document will do the most basic reset for your app, especially for pseudo-classes (:link,:visited). Interestingly, it does not reset margins and paddings on <div> tags.
Now the same reset without comments:
:link,:visited { text-decoration: none; }ul, ol { list-style: none; }h2,h2,h3,h4,h5,h6,pre,code { font-size: 1em; }ul,ol,li,h2,h2,h3,h4,h5,h6,pre,body,html,p,blockquote,form,fieldset,input { margin:0; padding:0; }a img,:link img,:visited img { border:none; }address { font-style: normal;}
Option 3: MiniReset.css
URL: https://jgthms.com/minireset.css/
Yet another extension of a previous library. One of the great things they are using is border-box. This library seems to be well-maintained on Github:
jgthms/minireset.css
minireset.css ? A tiny modern CSS reset
github.com
I would recommend using it in your code for very minimalistic resets for your styles.
Option 4: Eric Meyer?s Reset CSS
This is where we got to, I suppose, the most popular reset.css in front-end, the Eric Meyer?s Reset. As we have already discussed earlier, even Eric himself strongly suggests playing around and adjusting the reset to cater to your needs.
Some tags in the presented reset are outdated, yet, one of the reasons it is so popular is because people are used to it and in the end of the day it does the job pretty well. I would still recommend to stay away from the libraries that use old tags, because why even in the first place?
Option 5: HTML5 Doctor CSS Reset
URL: http://html5doctor.com/html-5-reset-stylesheet/
Based on Eric Meyer?s Reset CSS, the HTML5 Reset Stylesheet by HTML5Doctor.com aims to provide a basis for any websites making use of the new HTML 5 attributes, while improving in some areas and also removing support for deprecated HTML 4 elements.
As described here, it is based on the infamous Reset CSS. This one is pretty much a built-on-top-of-reset library, that has some improvements such as
- Improvements on tags (old tags removed and new ones added):
reset vs htmldoctor side by side
2. New additions: attention to <a> tags and <input>
HTMLdoctor has some improvements over the standard reset
NB: Beware that it includes some opinionated colours that you might want to change in your own version!
Option 6: Yahoo Reset CSS
URL: https://cssreset.com/scripts/yahoo-css-reset-yui-3/
YUI 3 CSS Reset was written as a reset for Yahoo! YUI 3 is a next-generation JavaScript / CSS library, written collectively by the Yahoo! Developer Network, which also powers the Yahoo! homepage. This reset is quite generic and from my knowledge is not used widely as a reset library on projects.
Option 7: Tripoli CSS Reset
URL: https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
The Tripoli reset has been mentioned back in 2007. It is a bit more font-centered library. It does not inherit anything, but rather stands on its own principles. Even though some tags (<blink>, <nobr>) there are outdates, in general it provides with good reset options. Setting fonts to a specific value can be very helpful. Using !important is never a good idea, though. The method seems to be outdated, yet still applicable.
Option 8: Normalize.css
URL: http://nicolasgallagher.com/about-normalize-css/
A modern alternative to CSS resets. ?as used by Twitter, TweetDeck, GitHub, Soundcloud, Guardian,Medium, GOV.UK, Bootstrap, HTML5 Boilerplate, and many others.
People are really trying to put Eric Meyer?s Reset CSS and Normalize.css against each other but in reality Normalize.css is just another type of reset.
First image: MiniReset, second image Normalize
Compared to the resets that create so-called ?default? values for everything (all text rags to 16 px, all margins to 0), Normalize.css takes a different directions of following the specs and making sure all tags comply to them.
It rather makes sure that the elements look consistent across browsers. This is where all those specific numbers are coming from. Also, one of the great parts is that maintainers really take care of making sure they follow all the browsers inconsistencies, even with browser prefixes. A good part is that this library is well maintained and updated.
If your goal is not to disable all the browser styles, but rather make sure stuff looks the same in every browser, this is a good option!
Option 9: Sanitize.css
URL: https://csstools.github.io/sanitize.css/
sanitize.css is a project by Jonathan Neal, built upon normalize.css, a project by Jonathan Neal, co-created with Nicolas Gallagher.
Frustrated with not finding exactly what he needs, he created a library based upon Normalize.css with a few improvements. Here is the comparison with Normalize on the left and Sanitize on the right.
It is very well maintained and I recommend pay some attention to it.
Option 10: Reboot.css
URL: https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css
Yet another powerful reset library based on Normalize.css. Bootstrap uses it to reset browser default styles and make web pages look consistent. Here is the comparison of Normalize and Reboot (left and right respectively):
Diff Checker
Diff Checker is an online diff tool to compare text to find the difference between two text files
www.diffchecker.com
Reboot.css is no doubt one of the most useful libraries and this article contains a lot of good points on why.
If you want to know more, I highly recommend reading the following articles:
A Look at Bootstrap 4's New Reset: Reboot.css
I’ve been wanting to write this article for a long time – since August 25, 2015 to be exact. It’s been in the back of?
scotch.io
Bootstrap?s Reboot ? Next Evolutionary Step for CSS Reset
Bootstrap 4 is coming, among other things, with substitution for Normalize.css. Its own browser defaults unification?
medium.com
Option 11: Destyle Reset
URL: https://nicolas-cusan.github.io/destyle.css/?utm_campaign=destyle.css-a-clean-slate-for-writing-c
When it comes to resetting styles in my code, I always used to do the following: I used Sanitize.css and included html5doctor on top. This way I made sure my styles were both ?fixed? and ?reset? in my css, but now Destyle does that. According to its own claims it is an
Opinionated reset stylesheet that provides a clean slate for styling your html.
It has pretty good docs that you can check out here.
Option 13: CSS remedy
URL: https://github.com/mozdevs/cssremedy
This is still work in progress, but I am sure this will not stop people from using it! CSS Remedy are claiming to have taken a different approach by:
CSS Remedy sets CSS properties or values to what they would be if the CSSWG were creating the CSS today, from scratch, and didn?t have to worry about backwards compatibility.
I would probably advice to take a critical look inside of the docs, and, maybe, partially include it into your own CSS reset on a project.
Specialised resets
There is of course some resets that are aimed at a very concrete goal, such as form reset: https://formalize.me/ It solves the problem of the form fields working in a very unpredictable way across.
A more exotic reset was a Vanilla CSS Un-reset. This is not a reset technically, but rather a stylesheet that redefines common CSS rules after they were wiped out by reset. It is meant to be working in tandem with reset.css
?Vanilla is meant to be pasted into your CSS stylesheet, then adjusted and tweaked as needed. It?s meant as a very base stylesheet that can be used so you don?t have to start over every time.?
This reminds me of Normalize.css, yet a standalone solution. I have not really seen people use it though ever, so take it with a grain of salt.
Writing your custom reset
As an alternative, you can write your own custom CSS reset. There is plenty of examples out there, some of them are explained in a quite detailed manner and I do recommend you check these out:
- One of them being an article by @IreAderinokun , where she described her way to approach reset styling.
- One being from Helmut Wandl where he shown his approach to writing a reset in a minimalistic fashion.
- Another article I found was published on habr.com in Russian, but you do not really need to speak any ? the code is pretty self explanatory.
One thing I really recommend writing your own reset: check what properties are critical for accessibility (outline, :focus) and make sure you are not deleting them, but rather replacing. There is plenty of resources you can find such as here and here. And remember, all resets are opinionated.
Now that we know it, what are we going to do with it?
One thing you should remember and take out: Reset and Normalize.css are not drop-in, you need to integrate them into your css code in the beginning of writing your application CSS, not post factum.
By adding them as an after-thought, you risk to break some of your existing styles and have problems with the layout alignment. I personally use Sanitize.css in a tandem with html5doctos (in that specific order). First I normalize everything and then I reset the rest. Of course, Destyle is also a good option.
To reset, or not to reset? That is the question.
I have seen a lot of articles explaining why we need CSS resets in great detail as well as a lot of articles against using it. Here is one of them . And here is another one
You should be your own tech-lead and decide for yourself how you want to organise your CSS. This is my attempt to explain where this whole thing is coming from and why I am a huge advocate for CSS.
Lastly, I would like to encourage you to share the information you may have found on the CSS resets in the comments, something I might have missed. I really would love to have your feedback as well!
