Updated: August 6, 2009
Reset stylesheets, also called CSS Resets, are short stylesheets whose aim is to reduce browser inconsistencies by nullyfing a good deal of the browsers’ default CSS styles.
I think reset stylesheets are unecessary and sometimes harmful. Well, not that harmful — but still, i think there are better alternatives.
Note aux lecteurs francophones: cet article est adapté de la version française publiée sur Alsacréations. Il peut toutefois y avoir quelques différences.
Not much, really. Old-style CSS Resets had problems, but modern-day reset stylesheets such as Eric Meyer’s Reset CSS are really decent tools.
So why don’t i use them? Let me explain.
Old-style CSS Resets went like this:
* { margin: 0; padding: 0; border: 0; }The main problem with that is that it applied to all
elements with no discrimination. Which caused some problems. For
instance, form inputs would lose their default, OS-like style
because of the border: 0;.
More modern CSS Resets evolved into small stylesheets listing all
relevant elements and applying more precise styles to them. They are more
precise, but as they try to cover a lot of things they are prone to errors
from time to time. For instance, styles such as a {outline: none;}
will break keyboard access on a whole site in most browsers.
Now, that kind of error can be corrected. Eric Meyer’s Reset CSS still does it, but hopefully that will get fixed eventually.
Another issue with reset stylesheets is that when they use inherited CSS
properties (such as font-size) and apply them on virtually any
element in the page, some webdesign and debug tools will show you a lot of
barely relevant information. This is what you
get when inspecting an element with Firebug on a site that uses a reset
stylesheet. (Note that other tools, such as Webkit’s Web Inspector, collapse all
identical inherited styles in just one blob. If Firebug ends up doing the same,
this problem will be history.)
Finally, the main problem with reset stylesheets is that they, well, reset all default browser styles. The reasoning is that there are many inconsistencies between browser defaults, and those defaults should be erased so that the CSS coder can define everything precisely.
My take on this is: browser defaults are sensible and useful. Thanks to them, your content will always be readable (though not sexy). If you take them away, you risk having content (say, user-generated content) that ends up being unstyled, raw, with not even some margins to give some rythm to that content.
Moreover, if you think browser defaults cause most of your layout inconsistencies, you are wrong. With sufficient knowledge of CSS, you will realize that most of those things you thought were inconsistencies due to browser defaults are actually caused by:
(I happen to think the collapsing margins mechanism is the greatest thing since sliced bread. It is a bit troublesome sometimes, but it’s a powerful means of managing spacing between blocks, headings and paragraphs.)
Granted, there are a few inconsistencies between browser
default styles. It’s mostly about margin/padding on
the body element, margin-left/padding-left
on the ul and ol elements, and the
font-size of h1, h2, etc. elements.
If you feel like those few inconsistencies justify setting everything to
zero then having to specify the exact margin and padding of most elements in
each situation, then do use a reset stylesheet. If you feel that setting
margin: 0; padding: 0; etc. on a list of 80 elements or more is
overkill or not that subtle, then go on reading.
I don’t use reset stylesheets, but i do use my own base stylesheet for every new project. Like CSS Resets, it aims to make browser default styles consistent; but instead of resetting most default styles, it sets one default for every browser.
As i’m publishing this stylesheet for anyone to use, i’m striving to make it better in any way i can (while not making it too big). This base stylesheet is intended both as a anti-reset, and as a canvas for setting basic styles for common HTML elements.
Basically, this means if you want to use it — and i encourage you to —, you should read it, understand it, and modify whatever doesn’t suit your taste or, more importantly, your project’s needs.
For instance, you may decide that the whole “ADDITIONAL BASIC STYLES” part at the end of the stylesheet is irrelevant or wrong for your project.
/*
No Reset: A Base Stylesheet For Your Projects
Makes browser default styles more consistent, and provides a canvas that
you SHOULD modify to fit your needs.
http://covertprestige.info/css/base-stylesheet/
*/
/* --- BASIC STYLES --- */
/* Page */
html {
font-size: 100%; /* Avoids IE 5-7 bug with EM fonts */
}
body {
margin: 0;
padding: 1em; /* set to zero if needed! */
/* font-family examples:
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif; */
font-size: .8em; /* Adapt for your chosen type! Usual range: .625 to 1 */
line-height: 1.4; /* Adapt for your design and chosen type! 1.1-1.2 is good
for title text or narrow column text but you will want to increase that
to something in the 1.2-1.8 range for main content text. */
color: black;
background: white;
}
/* HTML5 defaults */
article, aside, dialog, figcaption, figure, footer,
header, hgroup, menu, nav, section {
display: block;
}
/* Titles */
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 .5em 0; /* Titles should be close to the text they describe */
line-height: 1.2; /* Bigger text is often nicer with smaller line space */
font-weight: bold; /* Browser default. Use "normal" for less bulky titles */
font-style: normal;
}
h1 {
font-size: 1.75em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
h4 {
font-size: 1em;
}
/* Lists */
ul, ol {
margin: .75em 0 .75em 32px;
padding: 0;
}
/* Paragraphs */
p {
margin: .75em 0; /* Most browser defaults are "1em 0". */
}
address {
margin: .75em 0; /* You may want display:inline;margin:0; in HTML 5 */
font-style: normal; /* The annoying browser default is "italic". */
}
/* Links */
a {
text-decoration: underline;
}
a:link {
color: #11C;
}
a:visited {
color: #339;
}
a:hover, a:focus, a:active {
color: #00F;
}
/* No dotted outline or halo around links when clicking them */
a:active {
outline: none;
}
/* No border around images in links */
a img {
border: none;
}
/* Misc inline elements */
/* These are default styles in virtually any browser, but you may want to
change them for a specific project. */
em {
font-style: italic;
}
strong {
font-weight: bold;
}
/* Stopping superscript and subscript from augmenting the line's leading */
sup, sub {
line-height: 0;
}
/* Forms */
form, fieldset {
margin: 0;
padding: 0;
border: none;
}
input, button, select {
vertical-align: middle; /* Not perfect,
but best compromise for most browsers */
}
/* --- ADDITIONAL BASIC STYLES --- */
/* Make abbreviations more clearly visible */
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
}
/* Make quotations more clearly visible */
blockquote {
margin: .75em 0 .75em 20px;
padding: 0 0 0 10px;
border-left: solid 2px #ddd;
}
q, cite {
font-style: italic;
}
q cite, q q {
font-style: normal
}
/* Remove automatic quotation marks for inline quotations
("quotes:none" not working in Safari/Chrome) */
q:before, q:after {
content: "";
}
/* Bring paragraphs inside lists or quotations closer */
blockquote p, li p {
margin: .5em 0;
}
/* Basic styles for definition lists */
dl {
margin: .75em 0;
}
dt {
margin: .75em 0 0 0;
font-weight: bold;
}
dd {
margin: .25em 0 .25em 32px;
}
/* Simple styles for tables */
table {
margin: 0;
border: 1px solid gray; /* Set to "none" to suppress the table border */
border-collapse: collapse; /* Default is "seperate" */
border-spacing: 0; /*! No IE 6-7 support */
}
table td, table th {
padding: 4px; /* Set to "0" for no white space around cell contents */
border: 1px solid #ccc; /* Set to "none" to suppress cell borders */
vertical-align: top; /* Default is "middle" */
}