其实你不懂CSS

写下这个冒天下之大不韪的标题时我就很心虚，宛若韦小宝大言不惭地对百岁的张三丰说“其实你不懂武功”一样。不过还好，张三丰们都有足够的境界，不会在意小辈们的放肆，况且，这个韦小宝是拿着高人前辈的秘籍在说事。

使用CSS就好像是一场战斗。每一种浏览器都有它们独特的CSS理解方法（这里特别点名Internet Explorer），于是我们就得面对数不清的CSS陷阱。同时，CSS又是一门威力巨大的绝学，用好了惊世骇俗，一个不小心，就会走火入魔，你的作品和你的人就会毁于一旦，万劫不复。

1、无视浏览器兼容性

这个可能是WEB开发问题中的No.1，我们的目标，首先是没有蛀牙和把Layout转换为HTML+CSS，然后我们得保证我们的作品在所有的客户那里看起来都一样，不过他们是爪哇人还是火星人，也不管他们用的是什么浏览器。达成这个终极目标需要惊人的天赋和毕生的修炼——还不一定能成功。因为IE和FF（为代表的一系列浏览器）对CSS的解释有着国家主权级别的分歧，无人可以等闲视之。这一对不可调和的矛盾，经历时间的历练，总算是好了很多，然而依然是矛盾冲突的最大和最根本的原因。

我们能做和应该做的，就是在最喜欢的浏览器里实现我们的伟大蓝图的同时，在其他浏览器中不断检查。记住各种浏览器的喜好憎恶，记住无数规则来让页面尽量一致。同时还要记住，即便是同一个浏览器的不同版本，甚至同一版本的浏览器的不同操作系统间，我们都不能放松警惕。

2、不考虑小分辨率屏幕

做WEB开发的人往往有很大的面子，但是记住客户不一定会有！

调查你会面对的客户的屏幕大小范围再给出合适的设计（试试Google Analytics），否则的话，在800×600 ~ 1920×1080的巨大鸿沟之中，一切绝色网页都会变成明日黄花。

在美国,一位母亲在圣诞节前夕带着五岁的儿子去买礼物。大街上回响着圣诞节的赞歌,橱窗里装饰着枞树彩灯,乔装的可爱小精灵载歌载舞, 商店里五光十色的玩具应有尽有。

“一个五岁的男孩儿将会以多么兴奋的目光观赏这绚丽的世界啊!”母亲毫不怀疑地想。

然而,她没有想到,儿子却紧拽着她的大衣角,呜呜地哭出声来。

“怎么了?要是总哭个没完,圣诞精灵可就不到咱们这儿来啦!”母亲有些生气,语气中充满了严厉。

“我,我的鞋带开了……”儿子怯怯地回答。

母亲不得不在人行道上蹲下身来,为儿子系好鞋带。母亲无意中抬起头来,啊,怎么会什么都没有?!——没有绚丽的彩灯,没有迷人的橱窗, 没有圣诞礼物,也没有装饰丰富的餐桌……那些东西都放得太高了,孩子什么也没看见。落在孩子眼里的,只有粗大的脚印和妇人们低低的裙摆,在那里互相摩擦,碰撞,过来往去……真是好可怕的情景!

这是母亲第一次从五岁儿子的高度看世界。她感到震惊,立即把儿子抱起来,放在自己的肩上,儿子开心地笑了起来:“妈妈,好漂亮的圣诞节啊!”

记住，你所看到的未必就是别人能看到的。

3、从不考虑框架

如果你是从零开始做你的CSS设计的，也许你该问一下自己“为什么”。艳阳高照下没什么是新鲜的，这个世界上有那么多漂亮的CSS框架，它们被设计出来的初衷就是帮助我们更方便的制作CSS。好的框架往往已经很深刻的考虑了跨浏览器的问题、经历了很多的测试。真的，除非你在做什么跨时代的玩意儿，为什么不用用CSS框架呢？即便是顶级高手，也都是喜欢得到一把绝世武器的，而不是从当铁匠开始。

你想发明轮子么？

4、不使用一般的class

在我们设计网页的时候，不考虑将来的事情实在是不可原谅的，虽然会暂时会让事情变得很简单。通常来说我们应该在我们的每个设计中使用同样的简单易懂的命名，这样不管时代如何变迁，页面如何更新，我们的代码都会在一个相对稳定的状态中。

也许你会这样定义个常见的class

.right{float:right}

或许你还应该这样加一些属性：

.clear{clear:both}
.right{float:right}
.left{float:left}

5、从不检查HTML

也许你不觉得校验HTML会影响CSS的效果？很可惜，答案是会的。所以，校验你的CSS之前，记住检查HTML。你的HTML中有太多的表示标记会导致问题了，比方说一个忘记关闭的DIV，一个写错的class名。。。一切错误都是有可能的。在你发现有问题之后，先看看你的HTML是不是正确。剑鞘是用来装利刃的，质量不过关，就会伤到主人了。

6、从不检查CSS

做CSS而不检查CSS，初入江湖的小虾米也不应该这么做。

7、使用巨大的背景图

WEB设计新手喜欢用一张大大的背景图来填充，这样不管多大的分辨率都没有问题了。可是我们不应该这么做，使用CSS重复填充一张小图片才是正确的方法，这个差别是巨大的，下载一张200K的大图片和2K的小图片，不管是时间还是负荷，后者都立于不败之地。

一旦你使用了巨大的背景图，你让终端下载了无用的数据，还你让用户等待了许久。也许你有使用单独大背景的不得已的苦衷，不过只要可能，请使用小图片，甚至只用背景色。

8、什么东西都用CSS

当我们掌握一门技艺之后，便倾向于不停的使用它，或许我们要考虑一下这技艺是不是并不适合当前的情况。

当Web开发者尝试做一件更高级或特殊的事情时，也许应该想到换一种方式来实现它。一个典型例子，我们应该用表格来组织数据而不是用CSS控制的一系列DIV。我们使用CSS的理由是因为它可以加速我们的WEB开发，而不是给自己找麻烦。

9、使用内联CSS

又是一个常见的问题，而且发生的非常非常频繁，因为许多人对此不以为意。保持你的内容（HTML）和格式（CSS）分离，在任何成品中都应该这样！这样你就不会迷茫与各个文件中，苦苦思索这个奇怪的样式的由来。

记住，内联的CSS永远不应该在你的最终代码中出现，它只应该用来测试。

10、使用很多CSS文件

你是否有过在一个文件内包含12个格式文件的经历？这对任何想要修改一下页面的人来说都是一场噩梦，包括将来的你。不仅如此，向服务器的12次请求会大大增加页面的载入时间，降低用户体验。最好使用1~2个CSS文件来管理，大大加快载入时间，并让下一个接收你任务的家伙好好感谢你一把。