One of the first things to consider when creating web page is to include CSS reset to override default user agent's style rules. According to
css reset</>, most popular reset at current time is
Eric Meyer’s “Reset CSS” 2.0. With good references and experience with first version of Eric Meyer’s reset I decided to stick with it. (Eric Mayer is author of CSS: The Definitive Guide and other popular CSS books, you can find his blog
here.)
To improve performance (lower download speed and complexity of style sheet) I ended up with slightly (ok maybe a little bit more) modified version which was created by applying following rules.
1. Remove all unnecessary tag selectors from first part.
In my case first part was changed from original
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, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
to very shortened list of tags (your version should vary according to tags used in your project):
html, body, div, span, h1, h2, p, a, img, ul, li, form, label { margin: 0; padding: 0; border: 0;}
You can see, that I also removed three css properties and I will try to explain why.
I was searching for the explanation of
font-size: 100%; font: inherit; and found few lines about them
here:
Added font: inherit to the declaration block of the first rule. There are still older versions of IE that don’t understand inherit, but support is now widespread enough that I feel this can go in. I left font-size: 100% as a sop to older browsers, and override it with the next declaration in those browsers that understand.
It did not tell me the reason why they are necessary but at least indicated
font-size: 100% is there to support older browsers (not specified which ones). I searched more and found
CSS: 100% font size - 100% of what? which explains it is used to indicate that font size from browser preferences should be used. Also there is note that next declaration override it and if you are not paranoid about older browsers you can also remove it without worry.
Purpose of
font: inherit; is explained in
What is the purpose of using {font:inherit;}?. Simply you can tell yourself why it is there when font properties are inherited by default. They are, but user agent's style sheet have tag selectors for eg.
h1..h6 or
a tags and those take precedence because they are defined closer than what you specify for any parent element. To reset font properties you need to specify that it take inherited value. It is questionable to include this property because it will simply erase all basic font styles, sizes, colors etc. I don't think it is necessary, next image illustrate what is the difference (left side shows font: inherit property in place):
Main reason which lead me to remove this property was extensive hierarchy showed in chrome developer tools.
When property
font: inherit (and
font-size: 100%) ware in place:
When property
font: inherit (and
font-size: 100%) ware removed:
For now I also removed
vertical-align: baseline property. My tests shows there was no change when this property was in place. Also there are many indications that it caused problems with image alignment and alignment in table cells.
2. Depending on your usage of specific HTML5 tags you should decide if next section is necessary for you.
For now I don't use HTML5 tags to semantically divide content because tags does not include many scenarios for which web applications are created and I think it was not a step in the right direction and semantics should be described completely another way than is presented in HTML5.
In my case I removed following part completely:
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
3. Next is rule for body element.
After reading a little bit more about it (eg. j
Query/CSS: line-height of “normal” == ?px) it clearly explains that this fix is necessary because default value of line-height property is "normal" which is inconsistent in different browsers and font faces. As mentioned previously I also include default font face, font size and color in this declaration and they should be changed according to your project's needs:
body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #2A2A2A;
line-height: 1;
}
4. Rules at the end specify defaults for lists (ordered, unordered), blockquote, q, table and should be used when necessary.
/* optional */
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Applying all those rules for my project produced simple and easy to understand code:
html, body, div, span, h1, h2, p, a, img, ul, li, form, label {
margin: 0;
padding: 0;
border: 0;
}
body {
font: 12px/1 Arial, sans-serif;
}
ul {
list-style: none;
}
This article is written by developers of itumb.com.
