Joseph Crawford Using wordpress because he is lazy

9Nov/100

Un-Reset Stylesheet

The reset stylesheet has been aggravating me for years now. It was originally developed by Eric Meyer in April, 2007. As much as I respect and admire the man and I know he had his reasoning for developing it. I hate that he did it. Only because of who he is did so many people start using it thinking it was the right thing to do. It later received criticism from Jonathan Snook and even more from Jens O. Meiert who said it best "A novice should not use them, an expert would not use them". His article Why “Reset” Style Sheets Are Bad has to be the best argument I have found so far regarding the matter. I was originally going to write about this myself but after reading his take I don't think I can do much better so if you are currently using a reset.css I strongly urge you to go read his post.

I recently started a new job and work with a couple of guys who think the reset stylesheet is the only way to start coding a design. The problem is they do nothing to replace the style of basic elements of html. So in developing something I wanted to make an ordered list only to see it render like regular text with br's after every item. Their theory is if I want the list to appear a certain way then I should write more css and style it accordingly. Which leaves me thinking...not only should I not have to but it almost defeats the purpose of using css at all.

So I present the un-reset.css. A stylesheet to undo the what was done and place the world back in its natural order. Before you ask why not just remove the reset.css? Well I can not in my situation. The current design was built on it and so I needed a stylesheet that would set all of the styles back to default without effecting styles that rely on reset.css. All you have to do is link un-reset.css and add the unreset class to any element you wish. The contents should then be back to normal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
.unreset address,
.unreset blockquote,
.unreset dd, .unreset div,
.unreset dl, .unreset dt, .unreset fieldset, .unreset form,
.unreset frame, .unreset frameset,
.unreset h1, .unreset h2, .unreset h3, .unreset h4,
.unreset h5, .unreset h6, .unreset noframes,
.unreset ol, .unreset p, .unreset ul, .unreset center,
.unreset dir, .unreset hr, .unreset menu, .unreset pre { display: block }
.unreset li { display: list-item }
.unreset head { display: none }
.unreset table { display: table }
.unreset tr { display: table-row }
.unreset thead { display: table-header-group }
.unreset tbody { display: table-row-group }
.unreset tfoot { display: table-footer-group }
.unreset col { display: table-column }
.unreset colgroup { display: table-column-group }
.unreset td, .unreset th { display: table-cell }
.unreset caption { display: table-caption }
.unreset th { font-weight: bolder; text-align: center }
.unreset caption { text-align: center }
.unreset body { margin: 8px }
.unreset h1 { font-size: 2em; margin: .67em 0 }
.unreset h2 { font-size: 1.5em; margin: .75em 0 }
.unreset h3 { font-size: 1.17em; margin: .83em 0 }
.unreset h4, .unreset p,
.unreset blockquote, .unreset ul,
.unreset fieldset, .unreset form,
.unreset ol, .unreset dl, .unreset dir,
.unreset menu { margin: 1.12em 0 }
.unreset h5 { font-size: .83em; margin: 1.5em 0 }
.unreset h6 { font-size: .75em; margin: 1.67em 0 }
.unreset h1, .unreset h2, .unreset h3, .unreset h4,
.unreset h5, .unreset h6, .unreset b,
.unreset strong { font-weight: bolder }
.unreset blockquote { margin-left: 40px; margin-right: 40px }
.unreset i, .unreset cite, .unreset em,
.unreset var, .unreset address { font-style: italic }
.unreset pre, .unreset tt, .unreset code,
.unreset kbd, .unreset samp { font-family: monospace }
.unreset pre { white-space: pre }
.unreset button, .unreset textarea,
.unreset input, .unreset select { display: inline-block }
.unreset big { font-size: 1.17em }
.unreset small, .unreset sub, .unreset sup { font-size: .83em }
.unreset sub { vertical-align: sub }
.unreset sup { vertical-align: super }
.unreset table { border-spacing: 2px; }
.unreset thead, .unreset tbody,
.unreset tfoot { vertical-align: middle }
.unreset td, .unreset th, .unreset tr { vertical-align: inherit }
.unreset s, .unreset strike, .unreset del { text-decoration: line-through }
.unreset hr { border: 1px inset }
.unreset ol, .unreset ul, .unreset dir,
.unreset menu, .unreset dd { margin-left: 40px }
.unreset ol { list-style-type: decimal }
.unreset ol ul, .unreset ul ol,
.unreset ul ul, .unreset ol ol { margin-top: 0; margin-bottom: 0 }
.unreset ul { list-style-type: disc }
.unreset u, .unreset ins { text-decoration: underline }
.unreset br:before { content: "\A"; white-space: pre-line }
.unreset center { text-align: center }
.unreset :link, .unreset :visited { text-decoration: underline }
.unreset :focus { outline: thin dotted invert }

Most of this came from the default stylesheet posted by the w3c for CSS2.1 so there are probably some unnecessary elements. The only real change I had to make was adding ul { list-style-type: disc }. I'm not sure if anybody will even find a real use for this but if you do and have any comments or suggestions please let me know.