CSS的sprite和单位

(1).关于css sprite技术

比方说：

1. 有个论坛频道，其中有个一些论坛特有的小图标（火啊，顶啊之类），基于整站小图标大团结的思想，这些小图标也放在了那个icon背景图片上了。然而，数年下来，我发现，论坛的那几个图标就论坛这个频道使用了，这几个图标跟着整站走，对于99%的页面而言，是多余的，浪费流量，典型的“占着茅坑不拉屎”！
2. 数年以后，有些图标要作调整。问题来了，有些图标不记得其余地方有没有使用过，不敢删除，不敢替换。这可维护性立马降低了不少！

改进：

1. 属性分组：例如，全部分享系列的图标（新浪微博，企鹅微博小图标）集合
2. 功能分组：全部表示餐厅优惠状态的图标（惠，券等）集合在一块儿
3. 直接独立：无亲无端的小图标就不要硬是去攀关系，本身独立一家便可

总结：
    不能执着于某个牛角尖（我要最少的请求数）而破坏了大局的权衡。

 

(2).绝对单位和相对单位

input, textarea, select这些控件元素自己就有文字大小，默认不会直接继承body等父级标签。所以，咱们须要reset下，不然16像素的文字会吓着用户的。

最初的时候，受一些大网站的影响，是这样设置的：

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

我看了下，眼睛微博仍是这样子的（//zxx: 无数次事实代表，要想举反例，眼睛微博一找一个准）：

然而，这种设置很很差。为什么，看看上面“螃蟹和章鱼的故事”中螃蟹的下场就知道了！不灵活，不能自动适应，只会变成困兽，任人宰割。

好的作法是这个：

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

这个百分之百最佳实践，毋庸置疑，与什么狗屁经验没有一点关系。为何这样设置？你用了就知道了。

对了，临时想到其余一点东西，我看到不少人写两层标签按钮的时候，会有相似下面的代码：

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

若是你不写个高度height就缺少安全感的话，你这样写也好啊：

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

其实呢，有个height是多余的，这样子就够了：

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

记住，内外标签若是高度同样，不要同时出现相同的定值。