CSS Sprites and units

(1). About CSS Sprite Technology

For Example:

1. There is a forum channel, which has a few forum-specific small icons (fire ah, top ah, etc.), based on the whole station small icon of the idea of unity, these small icons are also placed on the icon background image. However, for several years, I found that the forum of the several icons on the forum This channel used, these icons follow the whole station, for 99% of the page, is redundant, wasteful traffic, typical "Occupy Manger not to poop"!
2. Several years later, some icons have to be adjusted. The problem comes, some icons do not remember other places have been used, dare not delete, dare not replace. This maintainability immediately dropped a lot!

improvements:

1. Attribute grouping: For example, all sharing series icons (Sina Weibo, Penguin Weibo small icon) collection
2. Function Group: All the icons (coupons, etc.) representing the preferential status of the restaurant are assembled together
3. Direct independence: friendless Small icons do not just to climb the relationship, their own independent family can

Summarize:
Not clinging to a NIU Jiao jian (I want the fewest number of requests) destroys the balance of the big picture.

(2). Absolute units and relative units

input, textarea the select control elements themselves have a text size, which is not inherited directly by default, body such as parent tags. Therefore, we need to reset, otherwise the 16-pixel text will scare the user.

Initially, this was set by the impact of some big websites:

Code  inputtextareaselectfont-size12px;}

I looked, and the eyes were still like this. (//zxx: Countless times the fact that, to give a counter-example, the eye micro-bo a quasi-search):

However, this setting is not good. Why, look at the "crab and Octopus story" in the end of the crab will know! Inflexible, unable to adapt automatically, will only become trapped beast, trampled.

The good thing is this:

Code  inputtextareaselectfont-size100%;}

This absolute best practice, no doubt, has nothing to do with any bullshit experience. Why is this set? You'll find out if you use it.

By the time I think of something else, I've seen a lot of people writing two-layer label buttons that have code like the following:

Code . redbtn Height 24px; ... }. redbtn . btn Height 24px; ... }

If you don't write a high height -level sense of insecurity, you can write it well:

Code . redbtn Height 24px; ... }. redbtn . btn Height 100%; ... }

In fact, there height is a surplus, this is enough:

Code . redbtn { ... }. redbtn . btn Height 24px; ... }

Remember, inside and outside labels, if the height is the same, do not have the same value at the same time.

CSS Sprites and units