Some interesting CSS questions (11) -- what does reset.css know ?, Cssreset.css

Some interesting CSS questions (11) -- what does reset.css know ?, Cssreset.css

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar

Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines

Some interesting CSS questions (10) -- structural pseudo-class selector

All questions are summarized in my Github.

 

The text starts from here. Most of the time, as the front end, we know that we need to add a copy before writing CSS styles.reset.css, But I have studied it in depth.reset.cssI am afraid there are not many people in each sentence. In fact, there are also a lot of knowledge. It is of great benefit to improve CSS by knowing ourselves and ourselves.

Reset.css

Let's take a look at a previous version of YUIreset.cssThis is a RESET solution with a long history:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {    margin: 0;    padding: 0;}table {    border-collapse: collapse;    border-spacing: 0;}fieldset, img {    border: 0;}address, caption, cite, code, dfn, em, strong, th, var {    font-style: normal;    font-weight: normal;}ol, ul {    list-style: none;}caption, th {    text-align: left;}h1, h2, h3, h4, h5, h6 {    font-size: 100%;    font-weight: normal;}q:before, q:after {    content: '';}abbr, acronym {    border: 0;}

First, we need to know what the purpose of css reset is? It is to eliminate the differences between different browsers in the default style, but today, the differences in modern browsers are much smaller.

 

Reset.css Problems

Take a look at the first paragraph:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {    margin: 0;    padding: 0;}

This style aims to clear the default ElementmarginAndpadding.

However, this piece of code is full of problems.

• Labels such as div, dt, li, th, and td are not default.paddingAndmarginOf;
• If I ask you what tags fieldset is, few people may know about it. Similar uncommon tags such as blockquote and acronym won't appear in html code, in fact, there is not much need for RESET, and only redundant code will be added to each project;

The above means that this piece of code has actually done a lot of useless work!

You must know that the css reset scope is global. We all know that we should avoid misuse of global variables as much as possible in script code, but we will always forget this in CSS. A large number of global variables will make it very difficult to maintain after the project is too large.

Let's take a look at this section:

h1, h2, h3, h4, h5, h6 {    font-size: 100%;    font-weight: normal;}ol, ul {    list-style: none;}

This piece of code aims to unify the h1 ~ H6, removed the bold display of the title, and removed the project points of the list element.

It seems that there is no problem, but such as h1 ~ H6, ol, and ul have specific semantic elements. Once their own characteristics are removed, they are not granted their own semantic styles (often none ), as a result, more and more people are confused about their semantics. On the other hand, this is also an important reason why more and more pages are filled with divs and lack of semantic tags.

The YUI version of the reset, regardless of whether it is fat or thin, is a one-size-fits-all approach. It seems that all elements are unified on the same starting line. In fact, a lot of redundant code is added, which outweighs the loss.

Therefore, many problems with YUI's reset.css lead to another version of reset.css named Normalize.css.

 

Normalize.css

Normalize.css has detailed comments. Because the length is too long, you can open a URL to see if this article does not post all the code.

normalize.css v5.0.0

Normalize.css and reset.css have exactly the opposite style. They do not have a one-size-fits-all relationship, but focus on general solutions and reset the reset style (such as the default margin of the body ), retain the user agent style and fix some bugs at the same time, which is lacking in reset.

 

What does Normalize.css do?

The Normalize.css comments are complete, and each piece of code explains its role. To sum up, it has done the following work (from the official website ):

Simple translation:

It is really recommended that you take the time to read the source code of Normalize.css and add comments to a total of 460 lines to learn more about the historical pitfalls of various browsers.

 

About trade-offs

Then, we will discuss the trade-offs. Is Normalize.css really better than reset.css?

Unfortunately, many bugs fixed in normalize.css are reset. In fact, none of the TEN projects in our project can be used. In a sense, these reset or repair operations are also called redundant code.

I think the most important thing is to refuse to take things out of the cloud. If someone else says this reset.css is easy to use and doesn't know about it, take it to the project. I have been writing code for several years. I know that every time I reference a reset, I have never carefully understood the meaning of each sentence.

About Maintenance

After the team has compiled a reset suitable for the team project based on the project requirements (maybe a mixed part of the reset or normalize, it is very likely that this version of reset.css will gradually add many other global styles, and then fall into the problems mentioned above.

In my opinion, reset.css also needs to be maintained. For the best reset.css, there is no permanent solution. Based on the flexible configuration of the project, you can make trade-offs and fine-tune it. You can crop and modify it right before using it.

Finally, the technical personnel should pursue something and do not want to satisfy the consumption of others' summary. They must go to the source to see it.

 

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.