Question

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

我认为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的组织，我喜欢分为基本类别：布局，排版，外观和导航

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

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

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

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

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

Answer 2

开始的好地方可能就是在Stackoverflow上阅读Common mistakes for CSS-designers to avoid?。如该线程所述，重置文件通常被认为是个好主意。我还会通过W3C CSS Validator运行您的CSS以发现任何警告或错误。删除任何超长样式和更长引用的样式也是一个好主意（我担心我知道如何做到这一点的唯一方法是手动，通过眼睛）。

Answer 3

Firefox有一个很棒的扩展名为Dust-Me Selectors，用于删除未使用的类/ ID。显然要谨慎使用，因为CSS文件可能包含在多个地方，但它是一个有用的帮助。

Answer 4

我非常相信CSS重置 - 尤其是Eric Meyer的重置，但是试图将重置移植到现有网站上真的很棘手。

你真的没有大量的CSS，所以我很想将它们全部合并到一个文件中并手动组织/优化它。

查看Natalie Downe关于CSS Systems的演讲 - 阅读PDF，因为它包含了幻灯片放映中未包含的大量笔记。

Answer 5

开始使用SASS和Compass。 Mixins，变量和其他超级好东西。您的代码css将变得干燥且可维护。它们还可以与YUI，Blueprint和960等网格框架配合使用，为您提供所需的语义边缘。

Answer 6

TopStyle是一个很棒的应用程序，可以完成很少其他CSS工具在清理代码方面所能做的事情。它能够在门户网站的大量CSS文件中隔离出无数冗余样式，规则和属性，这是其他工具无法找到的。它确实是最好的CSS工具。演示版本有一些局限性，但仍然可以完成大部分工作。

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

6 个答案: