重构5000行CSS的艰巨任务。有小费吗？

Question

我刚刚被分配了重构一个巨大的5000行CSS文件的任务......但这是最糟糕的部分 - 我还需要使它与IE6兼容。任何CSS大师都有工具的建议，或者可能在我的整体探险中使用的提示（常见的陷阱）？欢呼声。

Answer 1

checkout sass ...它包括将css转换为sass的功能。 http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html

sass文件是一个yaml文件，可以解析为css文件。它允许您使用变量和替代组织...

sass例子：

  !main_color = #00ff00

  #main
    :color = !main_color
    :p
      :background-color = !main_color
      :color #000000

---

css输出：

  #main {
    color: #00ff00; }
    #main p {
      background-color: #00ff00;
      color: #000000; }

Answer 2

一些提示：

1. 使用版本控制，以便在需要时回滚。
2. 在每个浏览器中提出每次更改后运行的可视化测试清单。一个URL链接和要查找的内容的电子表格，在遇到问题时构建它们（想想“单元测试”但不是自动化的。）
3. 首先使用特定于CSS的美化器，将所有内容都添加到您喜欢的大括号等格式中。
4. 考虑使用像SASS这样的东西来“编译”你的CSS。
5. 评论出来的事情，特别是你在做IE6特定的事情。
6. 通过构建具有IE6特定指令的单独文件来保护自己，或者至少使用Microsoft将其过滤出去用于其他浏览器的方式。
7. 经常使用W3C验证。

从机械上讲，我会像这样攻击它：

<link type="text/css" href="newhotness.css" />
<link type="text/css" href="newhotness-ie6.css" />
<link type="text/css" href="oldandbusted.css" />

将代码从第三个（旧）文件移动到另外两个文件中，随时清理。这样你就可以验证你的代码，而不必担心旧的东西中的大量错误，你可以跟踪你的进度，它们之间的Ctrl-Tab比单个文件中的位置之间更容易，等等。

（如果您无法控制标记来添加CSS文件，请在旧文件的顶部使用@import。）

Answer 3

从头开始！

假设您可以手动检查所有主要页面，我会非常想要擦除整个文件并从头开始。现在检查IE6的不一致性，无论如何你都会做几乎相同的工作，但如果你修改旧的，特定于浏览器的CSS，那将会更加痛苦。

5000行可以在2000行现代设计良好的CSS中表现出来。我认为大多数经验丰富的CSS开发人员会发现编写2k行新CSS比修改5k行可怕的CSS要少。

Answer 4

http://www.codebeautifier.com/

基于此：

http://csstidy.sourceforge.net/

Answer 5

不一定是CSS，但这里有一个问题：使用GIT 。

• 首先导入git;
中的文件
• 为每个小步骤提交，并记录您的所作所为;
• 当您发现某些内容破损时，您可以使用git bisect（a good description）确定完全相同的步骤;

---

对于额外的踢法，这里有一个关于code coverage for CSS的讨论，以帮助您快速清除未使用的规则。

Answer 6

正如Triptych所说，我会从头开始。另外，请考虑以下事项：

• 使用CSS重置文件来消除跨浏览器的不一致性：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
• 让它在Firefox中完美运行，然后根据需要调整其他浏览器
• 研究基础HTML。它是如何组织的？它是用桌子摆好的吗？所有的DIV？语义标记？
• 是用于布局或简单样式（字体，颜色等）的CSS？
• 一旦你对此有所了解，请研究内容。尽可能地分类布局和元素，以便识别所有常见元素并最大限度地提高CSS的效率
• 记住CSS中的C，将最常用的字体设为正文字体，以便其他元素默认继承它。
• 使用相对单位（ems）表示字体大小，以便正确缩放文本
• 尽量不要使用任何内联样式
• 使用Firebug - 它可以让你检查一个元素并确切地看到CSS有效以及规则来自哪里
• 不要害怕重复使用旧CSS的部分内容，尤其是下拉菜单等需要特定咒语才能正常工作的内容
• 玩得开心！从头开始，您可以实施最佳实践并一路学习。当你完成后，你可能会回顾这个很好的经历。
• 这里有一个演示文稿，可以让您进入正确的顶空来处理此任务：CSS Systems

Answer 7

我首先想要创建一个测试套件：自动化页面访问（可能使用Selenium？），截取屏幕截图，然后使用像ImageMagick这样的内容来比较参考图像。

另外，我提出了使用源代码管理的所有建议。如果您后来发现您的重构破坏了测试套件未检查的内容，您可以添加一个新测试，然后将您的历史记录一分为二，找到破坏它的更改。 Git对此很有好处。

Answer 8

获取具有良好语法突出显示的代码编辑器。好吧，我不羡慕你。

Answer 9

我最初的想法确实存在一些类似于NCover的CSS，因为查看是否所有CSS都被引用会很方便。一个关于CSS代码覆盖的快速谷歌发现了一些事情 - 你可能想要看看自己：http://development.lombardi.com/?p=436

Answer 10

安装sass，在你的5000行css上运行css2sass，继续。完成sass文件重构后，运行sass2css重新生成css文件。祝你好运！

Answer 11

我建议Stylizer - 它是一个带有嵌入式实时预览浏览器的CSS编辑器。它使编辑CSS文件时的生活变得更加容易，并且可以告诉您哪些规则会影响页面上的哪个元素等等。

Answer 12

你们所有人都说他应该从零开始是错误的。你不应该。尝试识别网站使用的不同部分。把它们放在一张纸上。找到匹配在一起的零件。建立一个结构。查找应用程序中相同但仍使用不同规则设置样式的部分。

拿一部分命名。然后将使用该“模式”的所有应用程序部分与正确的HTML / CSS进行匹配。

重复直到你完成。用小块分解大任务。

确定原始CSS编写器是否使用标准方法，例如使用CSS重置。如果他没有，并且所有内容都由#id定义而没有可重复使用的类，那么也许那些说你应该从头开始的人实际上是正确的。但我的观点是，你不能在不评估情况的情况下推荐这一点。

Answer 13

使用Dust-Me Selectors Firefox插件非常方便。这有点像CSS的代码覆盖工具。

Answer 14

工具建议：JetBrains的ReSharper。它将自动完成CSS并从CSS文件编辑窗口重命名站点范围的选择器。