CSS webpage instance: reset.css for all projects

Introduction to the article: The hacker forms the basic style of a project. This document introduces how to write a reset.css that is applicable to all objects, and how to configure the reset.css

 

0, Introduction
For each new project, the first step should be to use a reset.css to reset the style. If you use a unique reset.css directly, it will lead to various strange bugs in the future. The best practice is to write a reset.css reset and understand what each reset is. Reset.cssoriginally intended to reset the format. I have always suggested to put .clearfixinto layout.css, And put definitions such as h1 and h2 into typography.css. For details about how to plan the CSS structure of a website, refer to the articles on Smashing Magazine. There are some unsatisfactory Chinese translations in China. In this document, resetis divided into two parts, one is pure reset.css, can be used for any project. Creating forms the basic style of a project. This document describes how to write a reset.css that is applicable to all objects, and describes the content that needs to be set first for different projects after setting reset.css.

1. Basics
Newton stood on the shoulders of the giant Galileo, and we can do the same. First, we need to select a foundation for moving forward.
Never use

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

This problem is too many, so I will not add more remarks here.

Currently, Eric Meyer's reset style and YUI's reset style are popular. In addition, the Condensed Meyer Reset simplifies the Eric Meyer style. Interestingly, Eric's reset style also originates from YUI. The simplified version simplifies Eric's style back to the YUI style. At the same time, however, none of the widely spread (especially in China) on the Internet is the latest version. None of the above two pages are the latest. Eric specifically has a reset.css page. Yuidangqian's reset.css address is more than the above page. In addition, we can also use some common frameworks, such as Blueprint or Elements CSS Framework (This reset also originated from Eric Meyer ). OK. The preparation is almost done. All of the above can be used as references to organize our own reset. Here I mainly use YUI and a reset with Eric.

2. default color
YUI and Eric have different opinions on whether the page has the Default background color and foreground color.
YUI resets the background color to white and the text color to black.

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

Eric makes all colors transparent in the latest version. He thinks transparency is the most primitive color. Although he once thought that the white background color and black text color should also be set. Eric did not give a specific reason for the last change.

I basically think this problem is more important for user customization or for your design. In my opinion, if your design is a white background, do not set the background. A small number of users in the middle and high levels customize the Default background color of the webpage. Set it to their favorite background color, such as light blue. Common browsers provide this simple function. However, resetting the background color will undermine users' choices-although this ensures that your design is presented to all users in an original sense. Of course, I know that higher-end users will use Firefox such as Stylish to expand to customize pages. But I have to say that there are more users who only use "options" to adjust the background color, isn't it? At the same time, if the design itself has other background colors, such as black, blue, green and so on, OK, these designs can certainly set the background color. But do not place it in reset.css. Here is the place to reset the style, not the place you designed. Put your design on a wider land.
Therefore, simply put, NO, do not set the background color in the reset.

What about the text color? In principle, the text color should not be set. However, the legend object in the form element in IE is quite special and closely associated with the topic. By default, legend has its own color (related to the current topic) and does not inherit the color of the parent element (even if the color is set to inherit ;).
In some ways, we can take it for granted that the number of people who set the font color is much smaller than the number of people who set the background color, and that even if the background color is set, it is not surprising that the legend element is black. Therefore, it is understandable that YUI has set legend {color: #000;} In its reset.
On the other hand, isn't it better to put this character in typography.cssw.form.css? Different page designs may have different color requirements for legend. It is unnecessary to repeat the definition in reset.css. This cssrule can be used as the first rule to be set after reset.css.

3. padding and margin
Once popular* { margin: 0; padding: 0; }That is, for this purpose. Let the padding and margin of each element return to zero, especially those elements such as h1 and p, ul/ol/li, and the body itself also has margin. It is useful to clear the padding and margin of elements.
YUI:

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. }

Eric does this:

1. Html, body, div, span, applet, object, iframe,
2. H1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. A, abbr, acronym, address, 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. }

Eric writes almost all elements into the rules. However, YUI only clears the styles of elements with padding and margin, while other elements do not move. I personally prefer YUI because it can avoid unnecessary styles for irrelevant elements. This results in performance degradation when too many elements exist. But Eric also has merits. He writes this way, and the entire reset.css can be smaller than many bytes, resulting in less pressure on the server. However, what is the difference between this approach and using * to select all elements? This includes almost all elements! How do you use it? It depends on your preferences.

 

 

 

Introduction to the article: The hacker forms the basic style of a project. This document introduces how to write a reset.css that is applicable to all objects, and how to configure the reset.css

 

 

4. Border
In YUI:

1. Fieldset, img {
2. Border: 0;
3. }
4. Abbr, acronym {
5. Border: 0;
6. Font-variant: normal;
7. }

Eric has cleared all borders in the previous step, and YUI is recommended for the same reason.

5. outer border (outline)
This is the dotted box when the element gets the focus. On browsers outside of ie, you can set outline as Eric did below to eliminate it.

1. /* Remember to define focus styles! */
2. : Focus {
3. Outline: 0;
4. }

But YUI does not set this one. In Eric's style, we can see Eric's reminder: Be sure to redefine the style after getting the focus!
This is actually very important. From the perspective of accessibility, most people who are not easy to use the mouse use tab navigation to browse the Web page. If the element that gets the focus has a specific style, it can greatly help users of this type of group. It is generally recommended to set it to the same as: hover. It is often designed to be severely compromised by the dotted box. This rule is reserved in resetand used as a rule that is defined early after reset.css.

In addition, the browser does not set the outline attribute for the element except for the element that obtains the focus. Therefore, I don't think it is necessary to set the outline of all elements to 0 like Eric.

6. font style (font style/weight/size/variant)
YUI is divided into multiple items:

1. Address, caption, cite, code, dfn,
2. Em, strong, th, var, optgroup {
3. Font-style: inherit;
4. Font-weight: inherit;
5. }
7. H1, h2, h3, h4, h5, h6 {
8. Font-size: 100%;
9. Font-weight: normal;
10. }
11. Abbr, acronym {
12. Border: 0;
13. Font-variant: normal;
14. }
16. Input, button, textarea,
17. Select, optgroup, option {
18. Font-family: inherit;
19. Font-size: inherit;
20. Font-style: inherit;
21. Font-weight: inherit;
22. }
24. /* @ Purpose To enable resizing for IE */
25. /* @ Branch For IE6-Win, IE7-Win */
26. Input, button, textarea, select {
27. * Font-size: 100%;
28. }

Eric removed the style resetting in his final reset and only keptfont-size: 100%;He did not give a specific reason.
But in general, I think it is better to reset these styles. For example, the strong element is only semantic in many cases, and it is not expected to be bold. There may be a background color or other methods to emphasize. The reason why inherit is used here is not defined.font-weight: normal;You can see it in Eric's previous reset article. This is to prevent the parent element from being bold, but not a child element inheriting the bold attribute (because the normal attribute is set. So it is better to change the style of h1-h6 set in YUI and the style of both abbr and acronym into inherit.

. So here I am also inclined to use the YUI policy to reset all.

But unfortunately, in ie6/ie7, whether it is strong, h1-h6, or em and other elements, set inherit can not inherit the parent element attributes, still keep their own characteristics. This leads to browser differences. Style resetting is designed to avoid browser differences. However, browser differences are not desirable. I have been thinking about this for a long time, whether it is to unify all browsers and reset them to normal (the idea of YUI), or give up resetting these elements to let them go with their own nature, to ensure that the style is the same in all browsers (Eric's idea ). I finally decided to adopt YUI. Because, whether reset to normal or not, these elements cannot inherit the attributes of the parent element. In this case, the second step is to ensure that all these elements are restored to the normal appearance and avoid resetting the style during design.
I have to say that this compromise is only for IE6 and IE7. Maybe five years later, when the boss and customers do not want to support IE7, we can safely use inherit.

In addition, YUI does not reset the font size for the elements code kbd samp tt. But in IE, they are all scaled down and displayed. Therefore, we should reset font-size: 100% here;

 

 

 

Introduction to the article: The hacker forms the basic style of a project. This document introduces how to write a reset.css that is applicable to all objects, and how to configure the reset.css

 

 

7. line-height)
For line height, YUI does not provide a reset definition, while Eric provides a reset:

1. Body {
2. Line-height: 1;
3. }

By default, all elements of the row height are inherited, so setting the Row Height to 1 for the body is sufficient. When the row height is set to 1, the English is read as usual, but the Chinese language cannot be read, and the line spacing is too close, which leads to easy reading of wrong lines. Generally, 1.4 to 1.5 must be set in the Chinese environment for normal reading. I suggest 1.5. The calculated value is also an integer. For example, when the font size is 12 PX, the row height is 18 PX, and when the font size is 16 PX, the row height is 24 PX. It looks more comfortable. In addition, another important reason is that when the row height is 1 in IE, the top of the text will be cut off by a few pixels, especially when the font is bold. Therefore, the resetting principle is good, but it cannot be reset to 1.

8. List Style
YUI used:

1. Li {
2. List-style: none;
3. }

Eric used:

1. Ol, ul {
2. List-style: none;
3. }

Although I have not tested any problems with YUI, I always feel that it is safer to set ol and ul. In addition, fewer elements are affected, and the performance should be higher. Although the download volume is 3 more bytes.

9. Table Elements
The tables are relatively uniform. Are:

1. /* Tables still need 'cellspacing = "0" 'in the markup */
2. Table {
3. Border-collapse: collapse;
4. Border-spacing: 0;
5. }

Eric also reminded that cellspacing = "0" needs to be set in html to achieve the perfect resetting effect.
However, YUI also sets

1. Caption, th {
2. Text-align: left;
3. }

Do not center caption and th elements. As a reset, It is desirable. We recommend that you add this rule.

10. Mark up and down and baseline
Write YUI

1. Sup {
2. Vertical-align: baseline;
3. }
5. Sub {
6. Vertical-align: baseline;
7. }

It seems that there is no optimization. I don't know why I didn't write it together. Eric is defined in the first line. The problem is that YUI is defined like this, but the font size is not reset, which is a pity. Since the style is reset, it is more thorough, so it is recommended to change to this:

1. Sup, sub {
2. Font-size: 100%;
3. Vertical-align: baseline;
4. }

Similarly, Eric places all elements on Baseline, including superscripts. Eric's explanation is to force the designer to pinpoint the vertical offsets of these elements.

 

 

 

Introduction to the article: The hacker forms the basic style of a project. This document introduces how to write a reset.css that is applicable to all objects, and how to configure the reset.css

 

 

11. insert and delete (ins/del)
For this problem, YUI directly clears the underline of ins and The strikethrough of del:

1. Del, ins {
2. Text-decoration: none;
3. }

Eric retains the strikethrough line:

1. /* Remember to highlight inserts somehow! */
2. Ins {
3. Text-decoration: none;
4. }
5. Del {
6. Text-decoration: line-through;
7. }

How to choose? I chose Eric. Why am I not pursuing perfect style resetting here? The reset is designed to avoid browser default styles and problems caused by differences in default styles between different browsers when writing pages. I believe no one will oppose the deletable text Decoration of the del element. Some people will add other styles, such as font fades, but for elements with strong semantics such as del, there is nothing better to express the meaning than to use strikethrough. Unlike the focus style above, no one may like dotted boxes. However, there seems to be no browsers that do not strip the del element by default, so this line can be omitted.
So here I only reset the ins style. Don't forget to add some styles to the ins element while waiting.

12. Quote element quotation marks
In some browsers, quotation marks appear before and after q or blockquote. Not everyone liked this. So you need to reset it.
YUI is relatively simple. Only q:

1. Q: before,
2. Q: after {
3. Content :'';
4. }

Eric is considerate and resets both q and blockquote.

1. Blockquote, q {
2. Quotes: none;
3. }
4. Blockquote: before, blockquote: after,
5. Q: before, q: after {
6. Content :'';
7. Content: none;
8. }

OK, we decided to use Eric. There is always no error in style resetting with a little bit of detail.

13. Links
For links, neither YUI nor Eric adopts style resetting, but I decided to reset the link style for a long time. The reason is that the style should be completely reset. Secondly, not all designers like to use underscores to decorate the link style. Therefore, I suggest you reset the underline Of the link.

1. A {
2. Text-decoration: none;
3. }

But this is a bit rough. Only link and visited are really underlined, so it is better to change it to the following:

1. : Link,: visited {
2. Text-decoration: none;
3. }

In addition, the link color can be treated as a rule that needs to be set after reset. Direct access to reset.css is not suitable.

 

 

 

Introduction to the article: The hacker forms the basic style of a project. This document introduces how to write a reset.css that is applicable to all objects, and how to configure the reset.css

 

 

14. My reset Style
To sum up the above rules, here we will show my CSS reset rules, and the BSD Protocol is released. Please use them at will. Test sample (this was copied from YUI and thanks to YUI for its contribution .)
Download: reset.css reset-min.css

1. /*
2. Copyright (c) 2009, Shawphy (shawphy.com). All rights reserved.
3. Http://shawphy.com/2009/03/my-own-reset-css.html
4. Based on YUI http://developer.yahoo.com/yui/reset/
5. And Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
6. Licensed under the BSD License:
7. Http://creativecommons.org/licenses/BSD/
8. Version: 1.1 | 20090303
9. */
11. Body, div, dl, dt, dd, ul, ol, li,
12. H1, h2, h3, h4, h5, h6, pre, code,
13. Form, fieldset, legend, input, button,
14. Textarea, p, blockquote, th, td {
15. Margin: 0;
16. Padding: 0;
17. }
18. Fieldset, img {
19. Border: 0;
20. }
21. /* Remember to define focus styles! */
22. : Focus {
23. Outline: 0;
24. }
25. Address, caption, cite, code, dfn,
26. Em, strong, th, var, optgroup {
27. Font-style: normal;
28. Font-weight: normal;
29. }
31. H1, h2, h3, h4, h5, h6 {
32. Font-size: 100%;
33. Font-weight: normal;
34. }
35. Abbr, acronym {
36. Border: 0;
37. Font-variant: normal;
38. }
40. Input, button, textarea,
41. Select, optgroup, option {
42. Font-family: inherit;
43. Font-size: inherit;
44. Font-style: inherit;
45. Font-weight: inherit;
46. }
47. Code, kbd, samp, tt {
48. Font-size: 100%;
49. }
50. /* @ Purpose To enable resizing for IE */
51. /* @ Branch For IE6-Win, IE7-Win */
52. Input, button, textarea, select {
53. * Font-size: 100%;
54. }
55. Body {
56. Line-height: 1.5;
57. }
58. Ol, ul {
59. List-style: none;
60. }
61. /* Tables still need 'cellspacing = "0" 'in the markup */
62. Table {
63. Border-collapse: collapse;
64. Border-spacing: 0;
65. }
66. Caption, th {
67. Text-align: left;
68. }
69. Sup, sub {
70. Font-size: 100%;
71. Vertical-align: baseline;
72. }
73. /* Remember to highlight anchors and inserts somehow! */
74. : Link,: visited, ins {
75. Text-decoration: none;
76. }
77. Blockquote, q {
78. Quotes: none;
79. }
80. Blockquote: before, blockquote: after,
81. Q: before, q: after {
82. Content :'';
83. Content: none;
84. }

15. Complete a preliminary CSS framework
As mentioned above, style resetting is a common existence that can be used by all projects, and different projects should have their own personalities. Of course there are other commonalities, not part of style resetting, but equally important. Next, we can build a CSS framework. The CSS framework has much more to consider than a CSS Reset. Here we just click here and do not show more.

Layout.css
In addition to layout.css, we recommend that you use. clearfix. It is important to clear the float. However, this is not a style reset and is suitable for layout.

1. . Clearfix: after {
2. Content :".";
3. Display: block;
4. Height: 0;
5. Clear: both;
6. Visibility: hidden;
7. }
8. . Clearfix {display: inline-block ;}
10. /* Hides from IE-mac \*/
11. * Html. clearfix {height: 1% ;}
12. . Clearfix {display: block ;}
13. /* End hide from IE-mac */

In addition, layout.css can also be placed in a commonly used layout, such#wrap{margin:0 auto;width:960px;}Rules. Depending on your preferences.

Typography.css
Many rules can be placed here, and three of them are very important:
: Focus, a, ins
These three items are reset but important. We recommend that you set the full site style in typography immediately after reset to keep the style uniform.
Ins can be set separately. It is best to set focus to the same as hover, while the style of a is set according to the rules of LoVe and HAte.

The h1-h6 series was also reset before. You can set the style here. Depends on the site features. I personally do not like to define the font size of the hx series globally, and it is quite good to define 100% in a uniform manner.

The font-family attribute should be set next. For details, refer to the article of the shooting sculpture. In addition, as mentioned in the wheat article, the font of the form element cannot inherit the font of the parent element in IE, so it should be set separately.

As far as other parameters are set, you can refer to the narration in the previous article and find the corresponding parameters to typography.css. In this way, we can ensure the versatility of reset.css, so that different projects have different personalities. Make sure that reset.css is the same in all projects. It is conducive to project development. Finally, do not forget to add cellspacing = "0" when writing a table to achieve the perfect reset effect.

16. Discussion
The article writing is too hasty and limited to my own abilities. It can only be written here. You are welcome to leave a message for discussion. You can also send an email or contact me on Twitter. This reset can be further improved. Thank you.