We recommend some "top-level" CSS skills.

Snook. Ca recently introduced some "top-level skills" for CSS writing to all cssers ".
The font size uses px.
Declare CSS in a row and compare the following two:
H2 {font-size: 18px; border: 1px solid blue; color: #000; background-color: # FFF ;}
H2 {
Font-size: 18px;
Border: 1px solid blue;
Color: #000;
Background-color: # FFF;
}
The second one looks indeed formatted, but it won't be helpful in reading. Writing in a row allows you to quickly find the desired part.
In the past, I also wrote a similar second method, but gradually found that it was not very useful, just as the article said. A row looks nice, fast, and saves space and makes the file smaller.
Code writing in multiple parts
In this way, the code can be written to make CSS more page-based, and the problem can be found in the shortest time when a problem occurs. As shown below:
# Content {float: left ;}
# Content p {... }
# Sidebar {float: left ;}
# Sidebar p {... }
# Footer {clear: both ;}
# Sidebar p {... }
Browser support
Only the latest browsers are supported. That is to say, you must discard IE5 and ie5.5. This saves a lot of time. For IE6, the Hack model is not used. If you only target popular browsers, you only need a few Hack to achieve the same effect.
I noticed the CSS of NetEase's new homepage, one of which turned out to be! Important or Hack does not exist, but it works well in FF and IE. Reasonable use of CSS can avoid Hack. Of course, debugging takes more time.
All content containing floating elements in the container should be designed to be consistent with the container. If it is too large, it will slide to the wrong position. Adjusting to the outside of the container with a negative value of margin also causes slide.
Understanding Overflow if there are two floating elements on the page and too much content is output in the left container, the right container will run to the bottom. This means that your margin, width, or padding settings are messy, but they cannot be reflected in FF. Using overflow: hidden or overflow: scroll can prevent IE from allowing the content to rush out of the container.
Allow block elements to automatically fill in white space
CSS
Many people use a bunch of margin-top, margin-right, margin-bottom, and margin-left. In fact, this is the most basic, margin can be abbreviated as margin: Upper right bottom left value. Here we can see the summary of CSS abbreviations.
Avoid unnecessary selector
Minimize the selector of a style. If you find that you keep writing ul li {} or table tr td {}, it proves that the writing is too detailed. Fewer selectors make it easier for you to discover problems.
I have not completely translated, and there are many other words of my own, haha.