整理 CSS 的最佳方法是什么？ [关闭]答案

【问题标题】：What is the best method for tidying CSS? [closed]整理 CSS 的最佳方法是什么？ [关闭]
【发布时间】：2010-11-16 14:54:02
【问题描述】：

我正在整理一个过去曾被不同人修改过的网站。这是我拥有的页面的骨架..

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

替换：

*{margin: 0; padding: 0;}

并且可能将 css 拆分为 fonts.css、layout.css

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

【问题讨论】：

标签： css

【解决方案1】：

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

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

查看 Natalie Downe 在 CSS Systems 上的演示文稿 - 阅读 PDF，因为其中包含大量未包含在幻灯片中的注释。

【讨论】：

【解决方案2】：

TopStyle 是一款出色的应用程序，它在清理代码方面完成了其他 CSS 工具无法做到的事情。它能够在我们门户的海量 CSS 文件中分离出其他工具无法找到的无数冗余样式、规则和属性。它确实是目前最好的 CSS 工具。演示版有一些限制，但仍然可以完成大部分工作。

【讨论】：

【解决方案3】：

您可能希望将您的 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 做任何变通方法，请将它们放在这里。并且只通过条件 cmets 将这个样式表暴露给 IE。

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

从来不知道，有用的插件！
必备插件之一！

【解决方案6】：

阅读 Stackoverflow 上的 Common mistakes for CSS-designers to avoid? 或许是一个不错的起点。正如该线程中所指出的，重置文件通常被认为是一个好主意。我还会通过W3C CSS Validator 运行您的 CSS 以发现任何警告或错误。删除任何多余的样式和不再引用的样式可能也是一个好主意（恐怕我知道如何做到这一点的唯一方法是手动，通过眼睛）。

【讨论】：