CSS Web instance: Reset.css for all projects

Article Introduction: The other is "reset" for a particular project, a custom modified content that can be placed in files such as Layout.css, TYPOGRAPHY.CSS, and they are imported into a base.css to form the underlying style of a project. This article is about how to write a generic reset.css for all the projects, as well as an introduction to RESET.CSS after you set up a play

0, Introduction
Whenever you have a new project, the first step is to use a reset.css to reset the style. Abuse is not as good as not, directly with a ready-made reset.css will lead to a variety of bizarre late in the occurrence of bugs. So it's best to write a reset.css yourself and understand what each reset is for. Reset.css's intention was to reset the style, and I always suggested that the. Clearfix be put into layout.css, and the definition of H1 and H2 into TYPOGRAPHY.CSS. Specifically how to plan the Web site CSS structure, not in the text of the list, you can refer to Smashing magazine on the article, there are passable Chinese translation. Note that this article divides the reset into two parts, one is pure reset.css and can be used for any project. The other is "reset" for a particular project, a custom modified content that can be placed in files such as Layout.css, TYPOGRAPHY.CSS, and they are imported into a base.css to form the underlying style of a project. This article is about how to write a generic reset.css for all the projects, and what you need to set up for the different items after you set up the play reset.css.

1, the Foundation
Newton was standing on the shoulders of the giant Galileo, and we could do the same. First we have to select a basis for progress.
Please never use

1. * {margin:0; padding:0;}

This problem is too much to express here.

Currently more popular with Eric Meyer's reset style and Yui's reset style. Another condensed Meyer reset simplifies Eric Meyer's style. Interestingly, Eric's reset style also stems from Yui's. and the simplified version of Eric's style to simplify back to Yui's style. But at the same time, the bad thing is that the spread of the Internet (especially at home) is not the latest version. All of the above two pages are not up to date, Eric is dedicated to having a reset.css page. and Yui current version (2.7.0) of the reset.css actual address, than the page above more things. In addition, we can also base on some common frameworks, such as the blueprint or elements CSS framework (which is also derived from Eric Meyer). OK, it's almost ready for work. All of these can be used as reference materials to organize our own reset. I mainly use Yui here, with Eric's reset.

2, default color
For the page is not a default background color and foreground color, Yui and Eric have different views.
Yui Reset background color is white and the text color is black.

1. HTML {
2. Color: #000;
3. Background: #FFF;
4. }

And Eric makes all the colors transparent in the current latest edition, and he thinks that transparency is the original color. Although he once thought should also set white background color, black text color. As to why the last change, Eric did not give a specific reason.

This question I basically think is the user custom more important or your design more important question. My personal view is that if your design is a white background, then do not set the background. A small number of high level users who will customize the default background color of the page. Set to their favorite background color, such as light blue. The basic common browsers offer this simple feature. And our background-color reset will destroy the user's choice-though this will ensure that your design is authentic and present to all users. Of course I know that more high-end users will use Firefox extensions such as stylish to customize the page. But I have to say, only use the "option" to adjust the background color more users, is not it? At the same time, if the design itself has other background colors, such as black, blue, green and so on, OK, these design of course can set the background color. But please don't put it in the reset.css. This is the place to reset the style, not the place you designed it. Please put your design on the more vast land.
So, to put it simply, no, do not set the background color in reset.

So, what's the color of the text? In principle, the text color should not be set. But in IE in the form element legend This object is more special, with the theme of the relatively close. Legend will default to its own color (related to the current topic) without inheriting the color of the parent element (even if the Color:inherit is set).
From some points of view, it can be taken for granted that the number of font colors is much smaller than the number of people setting the background color; it's not surprising to see that the legend element is black if the background color is set. Therefore, Yui in its reset set the legend {color: #000;} is understandable.
But conversely, wouldn't it be better to put this in typography.css or form.css? Different page design, its legend color requirements are likely to be different, put in reset.css repeat definition is not necessary. This CSS rule can therefore be used as the first rule to be set after reset.css.

3,padding and margin
It was once popular for * { margin: 0; padding: 0; } that purpose. Let the elements of the padding and margin are zero, especially those H1 and p and ul/ol/li elements such as, and the body itself is also margin. It is useful to clear the padding and margin of elements.
Yui do this:

1. Body, Div, DL, DT, DD, UL, OL, Li,
2. H1, H2, H3, H4, H5, H6, pre, code,
3. form, fieldset, legend, Input, button,
4. TextArea, p, blockquote, TH, TD {
5. margin:0;
6. padding:0;
7. }

And Eric does this:

1. html, body, Div, Spans, applets, object, IFRAME,
2. H1, H2, H3, H4, H5, H6, p, blockquote, Pre,
3. A, ABBR, acronym, Addres S, big, cite, code,
4. del, DFN, EM, Font, IMG, ins, KBD, Q, S, Samp,
5. Small, strike, strong, sub, SUP , TT, VAR,
6. B, u, I, center,
7. DL, DT, DD, OL, UL, Li,
8. fieldset, form, label, legend,
9. Table, Caption, Tbody, TFOOT, THEAD, tr, TH, td {
10. margin:0;
11. padding:0;
12. border:0;
13. outline:0;
14. font-size:100%;
15. Vertical-align:baseline;
16. background:transparent;
17. }

As you can see, Eric writes almost all the elements into the rules. And Yui only have padding and margin elements empty style, while other elements are not moving. I personally prefer Yui's approach, because he can avoid some extraneous elements with unnecessary style. Performance degradation when there are too many elements. But Eric also has the merit, he writes, the entire reset.css can be small many bytes, to the server's pressure to be smaller. But think further, what difference does it make to select all elements with a *? This has almost all the elements! How do you use it? See what you like.

[1] [2] [3] [4] [5] Next page