CSS Resets and Why They Matter

One of the key features of Bootstrap, one that is also often overlooked, is its use of CSS reset through a modified version of the Normalize.css file. This file is very small (7.8KB before it is minified), but  very powerful as well. It was created by Nicolas Gallagher and Jonathan Neal as a way to provide a consistent output across all web browsers. Nearly every web browser has its own default web styling, whether it be variations in line height, different amounts of margin added to headings, or greater indent spacing for block quotes. Of course, this list is not exhaustive, as there are countless ways a browser can configure its default styling.

Using a CSS reset allows developers to start from a common baseline upon which their own styling can be applied. This is especially important when using the Bootstrap framework since the classes you will be using are pre-defined. Without a reset your page may display awkwardly, with elements out of place, causing more headaches than necessary trying to sort it all out. Fortunately for us, Bootstrap includes normalization code by default with its files, so there is no need to worry about this particular feature, but you should always be aware of the work this code performs behind the scenes. Alternatively, if you need this as a separate file, Normalize.css is freely available for download.

While a CSS reset clearly has its benefits in website development, like many things, it does come with some downsides. For instance, it is easy to override properties of a reset file or even have those properties override your own styling if you plan poorly. A developer may want to change the line height or the margin of a page they are working on, and rather than modify the reset code to reflect the desired line height change, they may create a new rule, which nullifies the original reset rule and takes up more space, as well as increasing the loading time.

While most traditional CSS resets bring all styling to a common baseline, Normalize.css is unique in that it preserves user defaults. While it may adjust the margins and font sizes of the HTML content, it also attempts to keep styles that are useful for design. For example, Normalize.css uses a sans-serif font in all its text because it is easier on the eyes than trying to read traditional serif-styled text.  Rather than zeroing out all properties, creating a truly blank canvas, Normalize sets property definitions to allow for a pleasant viewing experience across all browsers.

Lastly, using the Normalize.css file is beneficial to developers because it corrects common bugs in desktop and mobile browsers that traditional CSS resets cannot. The file is used to set display settings in HTML5 elements, correct preformatted text font size and SVG overflow in Internet Explorer 9, and help improve form functionality.

Whether you choose to use Normalize.css specifically, or another CSS reset method, keep in mind the importance of looking over which properties are going to be affected by the reset. Just like it is better to measure twice, cut once in construction, this same principle can be applied to web development. Taking the time to plan your layout and set properties accordingly can help save time and avoid headaches as your site grows in complexity.

 

-Happy coding!

Michal Patriak

Advertisements

Author:

I am a software development student eagerly exploring the software industry.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s