menu

天魔窟

勇往直前

Avatar

翻译:高效书写 CSS 的有用技巧

Jonathan Snook 最近发表了一篇帖子“Top CSS Tips”,介绍了一些精彩的 CSS 代码技巧,其中的一些源于个人喜好,对我而言,我所偏爱的方式则和 Jonathan 略有不同,所以我想针对它们逐条指出我的看法。

用 px 指定文字大小
Jonathan 对于应该使用 px 的论断有一定的意义,但是我一直使用 em。我更赞同结合使用百分比和 em 来设定文字大小,这样感觉更舒服。

把 CSS 声明写在一行上
和 Jonathan 不同,我只把那些仅包含一个规则的声明写成一行,多条规则的就分多行写。TextMate 的代码折叠功能可以帮助我规整源码。不过,Jonathan 所说的这么做可以节省页面文件大小的观点倒也是对的。

将样式按组书写
我恰恰也是这么做的:首先写针对 HTML 元素的声明,然后是全局类,最后是布局容器和段落。

浏览器支持
Jonathan 建议只支持最新版的浏览器。我同意,但是实际上很难做到,尤其是有时顾客会有特别要求。IE/Mac 会得不到 CSS,IE/Win 5.x 会有 CSS 盒模型的错误(这时我一直试图避免的)。我确实愿意保留一些针对 IE/Win 的 hack,保存在单独的文件里,用条件注释语句来加载。

容器里面的浮动对象
Jonathan 偏向使用 overflow:hidden 的办法,而我几乎总是用 PIE 上的“如何清除浮动对象的影响而不添加额外的标记”一文中所描述的方法。

理解 overflow
没错,当我们知道 IE 不能正确地处理 overflow,便可以在遇到浮动对象错位时不会太疑惑了。

让块级对象自动充满属于它们的区域
非常好的技巧。杜绝给对象指定宽度,margin,padding 或者边框宽度,将避免大多数 IE5.x 的盒模型问题。

使用 CSS 规则缩写形式
我甚至有一些对缩写着迷,所以绝对赞成。我曾专门写了一篇关于 CSS 规则缩写形式的文章:使用规则缩写提高 CSS 的效率

避免无必要的选择符
另一个极好的技巧。我总是尝试保持我的选择符尽可能的精简。我见过选择符写得严重过剩的样式表,导致文件超大。

保持简单
这是我最主要的指导方针,举双手赞成。

原文链结:http://www.456bereastreet.com/archive/200610/useful_tips_for_writing_efficient_css/

评论已关闭