重构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

获取具有良好语法突出显示功能的代码编辑器。另外，祝你好运，我不羡慕你。