Become Wordpress Professional - Your Ultimate Wordpress Guide

Tuesday, 19 March 2013

Concepts of Reset in CSS


What is CSS Reset?

One of the term you'll probably come across from time to time as you become more familiar with CSS is the term CSS resets. CSS reset is simply the term use to describe a collection styles that designer use to deal with the browsers default style sheets. As we discussed little earlier all browser have the default style sheet that will be applied to the page if they are not overwritten by the author styles. Using the CSS reset a designer can essentially nullify those styles and start from scratch without having to worry about what affect browsers default styles might have on their own designs. For the most part there are couple of basic properties that most CSS resets establish a base line for.

Common CSS Reset Properties

Those are
  • margin
  • padding
  • borders
  • font-size
  • line-height

CSS Reset Placement

I said for the most part because there are many different variations of CSS resets out there and some of them are considerably more complex then others. To use the reset you simply add your baseline style to the top of your main style sheet. It's important that these style are the first styles yours browser encounter. as you wanna reset the values site wide and then go back over them and overwrite them with the site specific styles.If the reset styles are added below the site's custom styles all the hard work is undone and the reset values become the site's styling.



As a way of introducing you to CSS resets i wanna show you Eric Meyer's popular reset CSS files and i'm gonna do that by going to his site HERE. Eric was one of the first developer to work on CSS resets and many designers, developers and systems have adopted his approach over the years, even use his file. Now rather then go through this code line by line and bore you to tears, rather just discuss what each section is doing as a way of building the bigger picture about what exactly the CSS reset does.

This first really really big block of code here takes most of the common html elements and resets their padding margin and border to zero essentially eliminating any of those browsers default values. It also gonna set the font size to 100% and ensure cross browser stability with font settings and baseline alignments.
    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
From there it go head to ensure block level display for newer html5 elements it gives the consistent values for link height and then go head to remove styling from list now as you can see below this is extra little bit more then just that going on here but by now i think you get the idea.
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
/* remember to define visible focus styles! 
:focus {
 outline: ?????;
} */
/* remember to highlight inserts somehow! */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}
Now flip side of this of course is that, if you remove the default styling of an element, you have to remember to put your own styling back. If you eliminate the default margins on paragraph, for example you have to remember to give them a value later on in your styles or all your paragraphs won't have any spacing between them at all. Now that's one of the reasons that some designers are critically using CSS resets.

CSS Reset Pros and Cons

  1. If you plan on setting up your own margins for paragraphs in your styles, you essentially doing the work twice by resetting the value to zero and then setting it again to the desired value.
  2. CSS reset can also cause the browser to do lot of work, depending upon the complexity of the reset, you could be asking the browser to go through and style every single element before even beginning to apply the sites actual styling and this can add a lot of overhead to your site for a minimal amount of value on occasion.
  3. Now other designer love the fact that CSS reset gives them a consistent baseline to build sites from and instead having of remember which items they need to over right for a site and which they don't. Going head using reset consistently when designing the sites means that you know exactly where you are starting from every single time and there are lots of value in that.

Should You Use Reset or Not?

Honestly, there is simply a personal preference that depends on how you as a designer like to work. In fact the need for CSS reset can even vary from one project to the next. Eric Meyer even said in the introduction to his reset that "it is not designed to be used as is" that it should be altered and customized to meet the need of the designer or the project.

Unfortunately designers have gotten into the habit of just copying and pasting CSS reset into their styles. You know this approach give them default baseline to work from but in my opinion it actually create more work for them in the long run. By exploring the styling need of the site carefully and then planning for how reset can benefit the site the designer can take standard CSS reset and tweak it. So the reset is efficiently setting the default styling for their project.

0 comments:

Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.