CSS sprites and units_html/css_WEB-ITnose

(1). About css sprite technology

For example:

1. There is a forum channel, which has some forum-specific Small icons (fire, like, etc.), based on the idea of ​​uniting small icons throughout the site, these small icons are also placed on the icon background image. However, after a few years, I found that the few icons of the forum were only used for the forum channel. These icons followed the entire site. For 99% of the pages, they were redundant and a waste of traffic. They were a typical "take up of 100% of the site". You won’t poop in the latrine”!
2. After a few years, some icons need to be adjusted. Here comes the problem. I don’t remember whether some icons have been used elsewhere, and I dare not delete or replace them. This maintainability immediately dropped a lot!

Improvement:

1. Attribute grouping: for example, all sharing series icons (Sina Weibo, Penguin Weibo small icons) set
2. Function grouping: All icons indicating the restaurant’s discount status (discounts, coupons, etc.) are gathered together
3. Directly independent: Don’t insist on building relationships with small icons that have no relatives or friends, just be independent.

Summary:
You can’t stick to a certain tip (I want the minimum number of requests) and destroy the overall balance.

(2). Absolute units and relative units

Input, textarea, select control elements themselves have text sizes, and will not directly inherit from parents such as body by default Label. Therefore, we need to reset, otherwise the 16-pixel text will scare the user.

In the beginning, influenced by some big websites, it was set up like this:

input, textarea, select { font-size: 12px; }

I took a look , Eye Weibo still looks like this (//zxx: Countless facts have shown that if you want to give a counterexample, Eye Weibo can find the right one):

However, this setting is very bad. Why, just look at the fate of the crab in the "Story of the Crab and the Octopus" above! If you are inflexible and unable to adapt automatically, you will only become a trapped beast and be slaughtered by others.

The good practice is this:

input, textarea, select { font-size: 100%; }

This is 100% best practice, needless to say, nothing to do with any bullshit experience Little relationship. Why is it set like this? You'll know after you use it.

By the way, I thought of something else. I saw that many people would have code similar to the following when writing two-layer label buttons:

.redbtn { height: 24px; ... }.redbtn .btn { height: 24px; ... }

If you feel insecure if you don’t write a height, you might as well write it like this:

.redbtn { height: 24px; ... }.redbtn .btn { height: 100%; ... }

Actually, having a height is redundant. , this is enough:

.redbtn { ... }.redbtn .btn { height: 24px; ... }

Remember, if the inner and outer labels have the same height, do not have the same fixed value appear at the same time.