整理CSS的最佳方法是什么？

我整理了一个以前由不同的人修改过的网站.这是我拥有的页面的骨架..

的test.html

nav.css

default.css

content.css

我认为CSS可以做一个适当的整理.我正在考虑使用这样的重置http://meyerweb.com/

取代 :

*{margin: 0; padding: 0;}

并且可能将css分成fonts.css,layout.css

任何想法,建议我如何解决这个问题将不胜感激.

您可能希望将css封装在更正式的CSS框架中.您可以创建自己的自定义框架,但有一些有用的开源css框架,如yahoo的YUI和Blue Print CSS http://www.blueprintcss.org/

这种方法的好处在于它利用大量精力来修复字体和布局的跨浏览器问题.

根据您的走多远,您可能需要广泛接触现有标记.根据您网站的大小,我会尝试逐步调整样式并将其迁移到正式的CSS框架.从长远来看,这将使CSS更易于管理,并且易于被熟悉框架概念的其他开发人员理解.

逐步尝试消除多余和未计入的样式.

我还会创建一个debug.css文件.获取所有旧样式名称并为其添加标识样式.例如:

.myoldstyle {border: solid 1px red};

然后,您可以检测整个站点中旧样式的使用位置.应考虑每种样式并将其移植到新系统.当旧系统中的特定样式已正确迁移到新系统时,您可以从debug.css文件中删除(或更好地注释掉)标识样式.当debug.css在显示输出中没有显示任何副作用时,您可以确信已迁移所有样式.

这可能是一个耗时的过程,但系统地接近它可能会有所帮助.

此外,您可能想要开始查看没有css的网站.只需了解代码的逻辑和语义标记.拥有干净的HTML代码库有助于调试样式怪癖.

至于CSS的组织,我喜欢分为基本类别:布局,排版,外观和导航

将所有与颜色相关的信息保存在lookandfeel样式表中.在这里,您将花费最多的时间来尝试满足客户的视觉品味和愿望.保持这是一个单独的逻辑样式表是很方便的.其他的东西更实用,更标准化.拥有这种抽象可以更容易地隔离样式的视觉效果.

最后一个提示,请查看Firefox firebug插件或Safari的debbugger.这些可以显示计算样式(样式和元素最终在应用各种样式时的方式),您可以实时调整特定样式,以便在复杂的CSS中探索特定样式更改的效果系统.

最重要的是,保持一个单独的ie.css文件.这应该是标题中引用的最后一个样式表.如果您需要为IE做任何变通办法,请将它们放在这里.并且只通过条件注释将此样式表公开给IE.

http://www.quirksmode.org/css/condcom.html

这是解决IE 6问题的最快方法.