A CSS Reset (or “Reset CSS”) is a short, often compressed set of CSS rules to reset the styling of HTML elements to a consistent standard. I’ve rolled my own; based on my own experience of CSS programming over the past fourteen years and based on other, well-known reset files.
Every web browser has its own default “user agent” stylesheet to make un-styled websites appear more legible. You never see websites with the default styling but if you’re interested, here’s an example: the first ever website.
In these user agent stylesheets, most browsers make links blue and visited links purple; give tables a certain amount of border and padding; apply variable font-sizes to H1, H2, H3 etc; add a padding or a margin to most elements, including the main document body. The big problem is, that each browser manufacturer applies these rules differently.
The result for a front-end web developer is that the first stage of making a brand-new website layout is resetting many of these styles. For example, it’s almost unheard-of to retain the default padding and margin on the document body. One of the first developers to compile such a set of rules and to prominently publish them was Eric Meyer; his “CSS reset” is one of the most popular in wide circulation. Since Eric first published in 2008, many other people have developed their own CSS reset rules and most of the leading CSS frameworks and boilerplates have their own versions included.
There are two cases which put me off using any of these individual solutions:
a) where the reset file is too simple and omits many essential definitions
b) where the reset goes too far and deletes all rules altogether.
What I needed was a middle ground and so I compiled the rules I use, compared them and extended them with knowledge and examples from the existing solutions at cssreset.com, and produced a LESS file for my own use. Having done so, I thought I’d make it freely available and so I published it in my GitHub account.
There are many other CSS reset files available from all over the place; searching at GitHub will provide a long list for you to choose from. I don’t expect my version to become the most used, but it is a good and reliable solution. It’s easy enough to skim through, should you want to know what’s going on; sufficiently extensive to get around all of the known issues and bugs which I encounter on every project and which the leading CSS examples at cssreset.com have implemented; and sufficiently concise to mean that it’s not resetting rules which make sense.
If you like the file then feel free to download it and use it; if you have suggestions for improvements or changes then feel free to open an issue ticket or to “fork” the code and extend or improve on it. If you’d like your modification to be rolled back into my original version, then you can submit a GitHub pull request.
Leave a Reply