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

Question

我正在整理一个网站，该网站以前曾由其他人修改过。
这是我所拥有页面的骨架。

test.html

nav.css

default.css

content.css

我认为CSS可以进行适当的整理。我当时想使用像 http://meyerweb.com/这样的重置

取代 :

*{margin: 0; padding: 0;}

并可能将CSS分成fonts.css，layout.css

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

Answer 1

您可能希望将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的组织，我喜欢分为以下几类:布局，版式，外观和导航

将所有与颜色相关的信息保留在外观样式表中。在这里，您将花费最多的时间来尝试满足客户的视觉品味和需求。保留这是一个单独的逻辑样式表很方便。其他的东西更实用，更标准化。有了这种抽象，可以更轻松地隔离样式的视觉效果。

最后一个技巧是，查看Firefox firebug插件或Safari的调试器。这些可以向您显示计算出的样式(应用各种样式时最终衍生出样式和元素的方式)，并且您可以随时动态调整特定样式，以探索复杂CSS中特定样式更改的效果。系统。

最重要的是，请保留一个单独的ie.css文件。这应该是标题中引用的最后一个样式表。如果您需要对IE做任何解决方法，请把它们放在这里。并且只能通过条件注释将此样式表公开给IE。

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

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