Recommend "top" tips for some so-called CSS

css| Tips

Snook.ca recently gave all Csser some "top tips" when it comes to writing CSS.

Font size using px

In a single line, declare the CSS in contrast to 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 really formatted, but it doesn't help in reading. Writing in one line allows you to quickly find the part you need.

I used to write a similar second way, but gradually discovered as the article said, not much use. A line looks refreshing and saves the place and makes the file smaller.

Block-writing code

This way the writing code can make CSS more page, in the presence of problems can be the shortest time to find the problem. Just like the following:

#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, give up IE5 and IE5.5. This will save you a lot of time. For IE6, it is not necessary to use the box model hack. If it's only for popular browsers, the same effect can be achieved with very little hack.

I pay attention to the new version of NetEase's homepage CSS, which unexpectedly a!important or hack are not, but in FF and IE inside display effect is very good. Reasonable use of CSS can avoid hack. Of course, there will be more time for debugging.

All content within the container containing the floating element should be designed to be consistent with the container. If it is too large, it will slide to the wrong position. Using negative margin to adjust outside the container can also cause slippage.

Understanding overflow If there are two floating elements in the page, outputting too much content in the left container will cause the right container to go down below. This means your margin, width or padding settings are confusing, but not in FF. Use Overflow:hidden or overflow:scroll to avoid ie allowing content to flush out of the container.

Allow block elements to automatically populate whitespace

Abbreviation CSS

A lot of people are margin-top, Margin-right, Margin-bottom, margin-left use a bunch. In fact, this is the most basic, margin can be directly abbreviated to margin: upper right lower left value. Here you can see a summary of the CSS abbreviations.

Avoid unnecessary selectors

Reduce the selector of the style to the minimum. If you find yourself constantly writing ul li {} or table tr td{} It is too detailed to prove it. Fewer selectors will make it easier for you to spot problems.

I do not completely translate, and there are many of my own words, hehe.