The Benefits & Drawbacks to CSS Resets

CSS is a well-known language used for styling a website layout and various elements on the page. The specifications have evolved throughout CSS2 and into CSS3, creating a much simpler development process. Resets are used to clear out default browser settings so that each project will be rendered with the same baseline interface.

css code resets paper featured photo

However these resets will sometimes create problems you never thought about. Removing default properties like padding and borders may lead to adverse effects on input fields and other similar page items. In this article I want to share my own perceptions about the benefits and drawbacks of creating web projects with CSS resets.

Why Reset?

The primary goal of resetting elements is to remove discrepancies between different web browsers. Font sizes and line heights are two great examples which tend to differ between browsers and Operating Systems. You will save time debugging and it grants you more control to manipulate the standard HTML elements.

With absolutely no margins or padding you will have elements stacked right up against each other. This means you’ll also be required to define your own values, but I see this as a higher form of control over the layout(rather than a nuisance).

Simply stated, I get more value out of resetting the document than not. So this is my particular reasoning for sticking with it. Plus I get to learn first-hand about browser bugs and how to fix them accurately. Resets can be a blessing or a curse, and sometimes both. But in my opinion they are worth the effort when you’re consistently building new web projects from scratch.

Why Ignore Resets?

I’d say the first reason to ignore CSS resets would be larger file sizes. Granted the modern web can handle large bandwidth limits so this really shouldn’t be a deterrent. CSS resets can range anywhere from 1-10KB extra into your stylesheet. I feel it’s worthwhile because you now have a tightly-knit page that should appear identical in almost every browser.

Another reason not to use CSS resets would be the obfuscated design of generic page elements. By removing all the standard properties you are left with a very basic starting point. Some developers thrive in this simplicity, while others would rather keep everything in its natural state.

If you prefer a homogeneous design without stripping out the basic CSS properties I would recommend a more detailed framework such as Normalize or Twitter Bootstrap. Normalize is meant to be a reset which provides simple formatting instead of bare bones whitespace – Bootstrap takes this to another level with predefined CSS classes and JS components.

bootstrap v3 library getting started page

I want to state that using any simple browser unification CSS will save you a lot of development time. If you’re hesitant just try out samples on a new web project to see how it works. Bootstrap is perfect for beginners and comes with some easy-to-read documentation. Once you have a framework that you enjoy using it gradually becomes apart of your daily workflow.

Sample CSS Codes

There are so many libraries to mention for CSS resets. If you’re nervous to get started I must highly recommend Twitter Bootstrap – even though it isn’t a true reset library you can learn more about the benefits of consistent page elements.

Many developers will create their own CSS resets built from a template of existing code snippets. I created my own resets from Eric Meyer’s sample and have been updating the snippet every-so-often. If you want something easier try removing the default margin/padding properties from all elements with this code:

* { margin: 0; padding: 0; }

There are more efficient ways to handle resets, but when just getting started you should play around as much as possible. Try to understand the purpose behind each declaration and how this affects various web browsers.

Another sample you might try is the HTML5 reset stylesheet on HTML5 Doctor. It goes more into detail regarding specific page elements. For example if we wanted to support the old deprecated italic/bold tags I would append these lines into my stylesheet:

b,strong { font-weight: bold; }
i,em { font-style: italic; }

This is just a small example but it demonstrates my point accurately. The more time you spend building websites, the more you’ll run into these problems such as font styling and layout positioning. If you save code snippets in your development IDE it’ll be easier to generate your own CSS resets and customize them for each new project.

Advancing Trends

SASS and other similar technologies allow developers to create templates and variables within CSS. You compile resets and stylesheets for individual projects at will, based on what you need for the layout design. I feel we are nearing the dawn of a new age for the web design industry. Powerful innovation coupled with newer technologies may provide a more uniform method for building superb websites.

css resets library open source webpage webapp 2013

Please take a look at CSS Reset whenever you get the chance. It contains a small compilation of the most popular CSS resets and libraries for getting started. You can also read through their helpful CSS tutorials to learn about resets and other web design techniques.

Beyond this point you may find yourself captivated with CSS libraries. Open source code has become very popular amongst developers because we all learn & share together as a community. Take this opportunity to read through some other posts and familiarize yourself with CSS resets, CSS UI libraries, and prototypical browser resets for a cleaner default layout.

Related Articles

Closing

There is no absolute right or wrong answer when it comes to browser resets. Each developer will have his or her own procedure which gets the job done. CSS resets can save you a lot of time matching a duplicate experience for each web browser. Just keep in mind these resets may not be necessary for every website and you should begin to understand the purpose of individual CSS libraries over repeated use.

Tags:
0 shares
Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.

Leave a Reply

Your email address will not be published. Required fields are marked *

471 Premium Design Resources for Free from InkyDeals.com! (sponsored)