其实你不懂CSS

By | 2011/07/13

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

使用CSS就好像是一场战斗。每一种浏览器都有它们独特的CSS理解方法(这里特别点名Internet Explorer),于是我们就得面对数不清的CSS陷阱。同时,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文件来管理,大大加快载入时间,并让下一个接收你任务的家伙好好感谢你一把。

发表评论

您的电子邮箱地址不会被公开。