Everyone knows the trusty CSS reset; that oh-so-useful tool that saves us many a headache. We love it so much in fact that we tend to use it on every project—but therein lies the problem…
When I discovered the CSS reset I almost cried with joy; the sheer amount of headaches, bug fixes—and thus time—it saved me was astounding. I vowed from that day on that I’d always use it, wherever I go. I’ve now realised that was a little silly…
I’ve realised that each time I blindly copy paste my reset, I do so without thinking, I’ve never really stopped to think about what’s in it, or what it all does.
Some time ago I removed the frankly ridiculous lists rest:
ul,ol{ list-style:none; }I have no idea how this ever got into a reset. I mean sure, it resets it—and Meyer does tell you to use the reset with care—but to remove the bullets from lists is more than a little daft if you ask me. Lists without bullets are the exception rather than the rule, so remove them only when you don’t want them, otherwise you end up with code like this:
ul,ol{ list-style:none; }
.nav li{
display:inline
}
.plain-old-regular-list{
list-style:disc outside;
}Whereas this is actually way more sensible:
.nav{
list-style:none;
}
.nav li{
display:inline
}Anyway, that aside, I’ve recently realised that my reset was getting stupid, and it’s embarrassing to admit that I had stylesheets like this:
/* RESET */
h1,h2,h3,h4,h5,h6{
font-weight:normal;
}
em,strong{
font-style:normal;
font-weight:normal;
}
...
/* TYPE */
h1,h2,h3,h4,h5,h6{
font-weight:bold;
}
em{
font-style:italic;
}
strong{
font-weight:bold;
}I know, face palm, right?
So I started to slowly slim my reset down to some sensible defaults and I removed things that I found myself constantly overwriting or deleting and finally, tonight, I skimmed over the HTML spec’s text level elements and I restarted my reset using sensible default styles based on the elements’ semantics.
The reset is below, but do not treat this one as the final version!
/*------------------------------------*\
RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart...
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
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;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
display:block;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
table{
border-collapse:collapse;
border-spacing:0;
}
strong,b,mark{
font-weight:bold;
font-style:inherit;
}
em,i,cite,q,address,dfn,var{
font-style:italic;
font-weight:inherit;
}
abbr[title],dfn[title]{
cursor:help;
border-bottom:1px dotted;
}
ins{
border-bottom:1px solid;
}
a,u,ins{
text-decoration:none;
}
del,s{
text-decoration:line-through;
}
pre,code,samp,kbd{
font-family:monospace;
}
small{
font-size:0.75em;
}
img{
border:none;
font-style:italic;
}
input,
select,
textarea{
font:inherit;
}Find the always-up-to-date reset in vanilla on GitHub.
Things I’ve removed:
- Deprecated elements like
big,center,acronymetc. - Aforementioned lists reset.
- Removal of borders from fieldsets (this needs defining on a per-design basis).
- Font weights and styles have been redefined rather than removed.
- Removed the underlines from the redefined
uelement as well as from theaby default as per my article On negative hovers.
Things I’ve added:
- Default stylings for text-level elements.
- Default styles for several new and/or redefined HTML5 elements (e.g.
markandu). - Text styles on images
- Make form elements inherit type properly.
Even if you don’t chose to use my reset (though it’d be great if you did) the one thing I urge you to take from this article is think about your reset. If you find yourself constantly overwriting rules from it then you ought to remove them. And remember; your reset can change per-build! You don’t always have to use the same one, just alter it where necessary for each design.
For example, let’s say that most of the time you opt to not have bordered fieldsets; if this is the case then it is safe to keep that section in your reset. But if, for whatever reason, a design does include them then simply remove that part. This makes far more sense than styling a fieldset twice; once in your reset to remove a border and once in your CSS to reapply it.
Reconsider your reset; the one I’ve authored is a pretty comprehensive one that will remove all quirky bits and pieces and leave you with nice—rather than stark—defaults. If you opt not to adopt mine then give your own some loving. Restart your reset!
By Harry Roberts on Tuesday, October 18th, 2011 in Web Development. Tags: CSS, Reset | 25 Comments »
+
Anton Trollbäck said on 18 October, 2011 at 8:24 pm
Normalize.css deserves a link: http://necolas.github.com/normalize.css/
Harry Roberts said on 18 October, 2011 at 8:35 pm
@Anton: I was considering leaving a link or a mention but I decided that normalize.css is more a quirk fixer than a reset. Perhaps it’s me but I see them as two different things…?
Carl Wood said on 18 October, 2011 at 8:43 pm
Nicely written. I agree about the ul and ol { list-style:none } points (pun intended) – often the lack of bullets are the exception, as I found in quite a few recent projects!
David Bushell said on 18 October, 2011 at 8:43 pm
Good advice!
While some reset stuff is just silly (em, strong) as you’ve noted, it’s really all about rapid development. The ability to start building straight away, safe in the knowledge of sturdy foundations. So really it’s all about what works for your usual build/design style.
Overwriting the odd rule is better than trying to debug an inconsistency you’ve forget to reset/define.
I would always recommend crafting your own reset though because it’s great practice to learn about browsers and the intricacies of CSS.
kikito said on 18 October, 2011 at 8:46 pm
I found out that oocss removes the disc from lists on its reset.css (a.k.a. libraries.css, for some reason still minified on the repo). That’s one of the first things I changed.
Joshua Lewis said on 19 October, 2011 at 4:16 am
Like you mentioned Eric Meyer includes the caveat with his reset that it shouldn’t be used as is but modified to suit the users needs. I believe he even noted on his blog how surprised he was that it had become an ‘as is’ default for many developers.
I like that you’ve built a modified version that fits your use and doing the same has been in the back of my mind for a while. My current starting template begins with a direct copy of Eric’s reset followed by the typography styles from BlueprintCSS. Then, as development progresses, I re-factor my styles to eliminate unneeded/redundant rules and to simplify how they work. By the time the site is finished the lines between the reset and other styles has blurred.
Rick Huby said on 19 October, 2011 at 7:13 am
Weird – I tweaked the Meyer reset to remove the list reset this week for the very same reason!
Leon Zoutewelle said on 19 October, 2011 at 7:55 am
One small comment on your reset file.
small has font-size: 0.75em;
h1 to 6 has font-size: 100%; why not 1em?
Antoine Nélisse said on 19 October, 2011 at 8:35 am
Why do you remove deprecated elements such as big and center but leave others such as i and b ?
Also, why not replace “[long list of all elements]{margin: 0; padding: 0;}” with a simple and clean “* {margin: 0; padding: 0;}” ?
Using a standard reset is a good thing, but I really think one should clean it afterwards to leave only the elements one uses. This allows for a huge decrease in size, and thus an increased performance…
Harry Roberts said on 19 October, 2011 at 8:48 am
@Antoine:
b,i(and evenu) are not deprecated elements in HTML5, they have all been redefined.The
*{}reset is also incredibly inefficient as it styles everything on a page, evenhead,title,meta,linkand more…Graeme said on 19 October, 2011 at 9:34 am
I agree that just taking the Meyer reset and using that without alterations is not a great idea as you reset things and then immediately set them a lot of the time on each project. Over time I’ve done what you have done and added in things to the reset that I found myself constantly re-writing each time, so it became less of a reset and more of a boilerplate as I defined basic styles for elements.
I used a combination of the Meyer reset, normalize css and my own way of working to have a template that I’m happy with and find myself constantly re-defining as I go
Adam Clark said on 19 October, 2011 at 10:50 am
We can do all the complex coding and we still all succumb to silly basic mistakes like this. I plead guilty too. My the CSS gods have mercy on me. I will be more observant in the future.
Nicolas Gallagher said on 19 October, 2011 at 12:02 pm
This repeats some of the problems with the “normal” reset.css and then creates some new ones. What are `html`, `div`, `span`, `a`, etc, etc, still getting `margin:0; padding:0;` for? There’s no need.
With normalize.css we actually researched every single line of code and tried to put together as comprehensive a test case file as possible. (Thanks to everyone who has caught bugs or contributed to the discussion about what should be normalized.)
Tom said on 19 October, 2011 at 12:35 pm
I use also (not seen in your template):
nav ul{list-style:none}
and
a,embed,object{outline:0}
because i like to fuck the accessibility.
Paul Salvette said on 19 October, 2011 at 1:09 pm
At the risk of looking like a knucklehead, can someone please educate me on why the a, u, ins gets the text-decoration:none; declaration instead of text-decoration: underline;? Is it just a matter of preference, or are underlined hyperlinks becoming a faux pas? Many thanks.
Brett said on 19 October, 2011 at 2:19 pm
@Tom: your comment about accessibility cracked me up. I too, am guilty of not liking the outline on focused links.
James Shuttler said on 19 October, 2011 at 10:49 pm
Interesting work, makes a lot of sense although to be honest I always tailor mine to each build based on the site’s requirements so that any superfluous styling does not clutter the stylesheet.
Chris said on 19 October, 2011 at 11:55 pm
`em {font-style:normal}
…
em {font-style:italic}`
Totally agree on the #facepalm – its painful!
Christian Krammer said on 20 October, 2011 at 9:29 am
I recently have also put much thought into my reset stylesheet and written an article about this process: http://www.css3files.com/2011/09/21/the-long-way-to-a-reset-stylesheet/
I’m more the type for * {margin: 0; padding: 0} since it’s shorter and there are only very few elements I don’t want to reset this way. But all things considered a reset stylesheet is respectively should be a very personal thing and should be judged on a per-project-basis.
I really advise every web-designer to take a few hours and build up his/her own reset instead of relying on a predefined one. And even if you have finally set up one, adapt it for every project.
Scott said on 20 October, 2011 at 1:30 pm
I’ve been working on something similar, although a little more aggressive. For example I’ve never understood the point of zeroing margin and padding on div elements – no browsers have ever added margin/padding to the div element by default. Same goes for the inline elements like b, i, span, etc.
It annoys me more when I’m using Firebug to see that massive rule listed over and over and over and over as it applies to each element in turn down the DOM tree.
felicja said on 22 October, 2011 at 10:38 am
There is just one place where bullets are needed: the section where you put the main content. And not always, because it can be replaced by some image.
So I find useful to reset
<ul>. Then I don’t have to writelist-style: noneevery time I style the navigation.I have a nice method to style the main content. I always give
class="text"so the styles can be applied to multiple sections, and than for example:.text ul {list-style:disc}. That’s the way to write less code :)Ash Robbins said on 24 October, 2011 at 3:24 pm
Good article Harry. I had been considering dumping my reset sheet in favour of a smaller reset section in my main sheet, as it seemed like I was over-writing a lot of stuff all the time (my previous reset was largely based on Eric Meyer’s).
So instead I’ve started work on my own boilerplate. I completely agree with what David Bushell says above that you need to have your own, because we all have our own processes and ways of working, so your reset/boilerplate/whatever might not work for me, and mine might not be right for you.
http://www.ashrobbins.com/2011/10/getting-rid-of-the-reset/
Vladimir Carrer said on 26 October, 2011 at 2:56 pm
Nice improvements to the classical CSS Reset, finally someone to kill ul,ol. This is new to me – img {font-style:italic;} ?
Probably most common mistake like you mentioned is to just copy paste the reset. So basically, first the browser uses it’s own resets, then we reset the browser reset and finally we set some styles. We overwrite the same element minimum 3 times.
I made CSS Mini Reset https://github.com/vladocar/CSS-Mini-Reset that is baseline for starting your own reset.
IMHO there is no right or wrong CSS Reset, there is CSS Reset that you understand and CSS reset that you don’t understand.
Anton said on 5 November, 2011 at 5:23 pm
what is the purpose of this img {font-style:italic;} ?
Adam Clark said on 1 February, 2012 at 4:36 pm
Are you seriously ever going to need ‘tt’, ‘kbd’, ’s’, ’samp’, ‘var’ or ‘applet’ elements in your projects? I’ve never seen them used. You might as well save yourself a little extra bytes and remove them too.