在广州网站建设中，我们常常遇到DIV+CSS,网页CSS重构(Refactoring)这个词最初由Martin Fowler 和 Kent Beck给下的定义，它是一种修改，使软件的内部结构更容易理解，在不改变软件的可见行为方式前提下使软件更容易变更…它是一种有节 制的整理HTML代码、使bug产生几率最小化的方法。

网页CSS重构的结果是引用了快捷方法、去除了重复HTML代码和死HTML代码，使设计和逻辑更加清晰。是在更好的、更聪明的使用编程语言。是在优势利用你现在知道、但当时的开发程序员并不知道——或并没有加以利用的信息。不断的简化HTML代码，让它们更容易理解。不断的使它们在将来的变更变得更容易、更安全。

在这个过程中发现了bug、修改bug，这不是网页CSS重构。优化不是网页CSS重构。强化异常捕捉、增加预防性HTML代码不是网页CSS重构。让HTML代码更容易测试不是网页CSS重构——尽管网页CSS重构能达到相同的效果。这些所有的事都是有益的。但这些都不是网页CSS重构。   　　程序员，特别是做维护工作的程序员，清理HTML代码是他们的日常工作之一。这是基本工作，是必须要做的。Martin Fowler等人的贡献是使网页CSS重构HTML代码的最佳实践方法格式化，并把常见的、证明切实有效的网页CSS重构模式——网页CSS重构的目标和网页CSS重构的步骤——进行归档分类。

网页CSS重构很简单。尽可能在写HTML代码前先写测试能够防止你犯错误。小规模的、独立的、稳妥的对HTML代码进行结构上的调整，每次调整完后都要进行测试，确保你没有改变HTML代码的行为特征——功能和以前一样，只是HTML代码上看着不同。网页CSS重构模式和现代化的IDE里的网页CSS重构工具使网页CSS重构变得容易、安全和代价低廉。

不要为了网页CSS重构而网页CSS重构

网页CSS重构可以被当成一种能给你的HTML代码变更带来帮助的措施。HTML代码网页CSS重构应该在你进行HTML代码变更前进行，这样能让你确信你对HTML代码理解了，使你更容易、更安全的把变更引入HTML代码。对你的网页CSS重构动作进行回归测试。然后进行纠正或变更。再次测试。之后可能需要对更多的HTML代码进行网页CSS重构，使你HTML代码变更的意图变得更加清晰。再次进行全面测试。网页CSS重构，再变更。或变更，然后网页CSS重构。

你不是为了网页CSS重构而网页CSS重构，你网页CSS重构是因为你想做其它的事情，而网页CSS重构能帮助你完成这些事情。

网页CSS重构的范围应该受你需要实施的HTML代码变更或HTML代码修正来决定——为了让HTML代码变更更安全和更简洁，你应该做些什么?换句话说：不要为了网页CSS重构而网页CSS重构。不要对那些你不打算进行变更或不会变更的HTML代码进行网页CSS重构。

为理解而做简略网页CSS重构(Scratch Refactoring)

Michael Feather的《Working Effectively with Legacy Code》这本书里提到了简略网页CSS重构(Scratch Refactoring)的概念;Martin Fowler称之为“为理解而网页CSS重构”。这是用来对付那些你不理解的(或不能忍受的)HTML代码，清理它们，这样在你打算真正动手修改它前，你能对它们是干什么的有了更好的理解，同样也对你debug这些HTML代码有帮助。一旦你能清楚了一个变量或方法的真正意图，重命名它们，给它们一个更合适的名称，删除那些你不喜欢看的(或觉得没有用的)HTML代码，拆解复杂的条件语句，把长程序分解成数个容易理解的小程序。

不要惦记着复查或测试这些改动。这是为了让你的网页CSS重构快速的推进——这能让这些HTML代码以及它们的运行原理在你的大脑里产生一个快速但不完备的原型。从中学习，然后丢掉它们。简略网页CSS重构还能让你尝试各种不同的网页CSS重构途径，学到更多的网页CSS重构技巧。Michael Feathers建议说，在这个过程中要留意那些看起来没什么用处、或者特别有用的东西，这样当你完成此练习后、要真正修改它们时，才能把事情做正确——修改时一点一点来，讲究方法，边修改边测试。

什么是“大规模”网页CSS重构?

对HTML代码进行简单的但又明显的网页CSS重构：消除重复，修改变量和方法名称使其更有意义，提炼方法使HTML代码更易懂、更易复用，简化条件逻辑，把无意义的数字换成命名的变量，把相似的HTML代码集中到一起。通过这些网页CSS重构，在HTML代码的可理解性和可维护性上，你能得到巨大的回报。   　　相对于这些较小的、行内的网页CSS重构，更加重大的设计上的网页CSS重构与之有明显差异——这就是Martin Fowler所指的”大型网页CSS重构”。大的、代价很高的变动，附带有大量的技术风险。这不是你编程过程中的清理HTML代码和设计改进：这是根本性的重新设计。

有些人喜欢把对一个系统的重新设计或重写或重新搭建平台或返工叫“大规模网页CSS重构”。因为技术上讲，这些并不改变软件功能特征——业务逻辑、软件输入和输出仍和以前一样，“只是”设计和HTML代码实现变了。它和常规网页CSS重构的区别看起来就是：一个是重写了一段HTML代码，一个是重写了一个系统，只要你是一步一步做下来的，你都可以称之为“网页CSS重构”——不管你是长年累月被困于将一个老系统换成新HTML代码，还是对系统架构进行大规模的改造。

“大规模网页CSS重构”会变的很糟糕。你可能需要花数周、数月(甚至数年)才能完成，需要你对软件的很多部分进行改动。软件会因此不能运行，需要分多次发布这些变更，需要你做临时的台架(scaffolding)和变通方案——尤其是你采用短周期的敏捷开发方法时。这时Branch by Abstraction这样的实践方法就派上用场了，它能帮你在长周期内管理HTML代码中的变化。

而且在开发新HTML代码的同时你还要维护旧HTML代码，这使得HTML代码版本控制很麻烦，变更起来不方便，致使HTML代码很脆弱，易犯错——这正和网页CSS重构所预期的目的背道而驰。有时这样的情况会一直持续下去——这种新旧HTML代码交替的过程永远不能完成，因为能获得最大利益的部分都是最先完成，或者因为最初带来这个想法的顾问已经干别的去了，或者是预算被消减，而且你也讨厌维护这样一个拖拉的项目。   　　这些是网页CSS重构——那些不是

在这种重型的项目开发过程中混入网页CSS重构的概念是不对的。它们从根本上就是另外一种工作，带有完全不同的开发成本和风险。它混淆了人们对什么是网页CSS重构、网页CSS重构能干什么的认识。

网页CSS重构可以、也应该融入到你写HTML代码或维护HTML代码的过程中——作为日常开发/质量管理的组成部分，就像写测试和HTML代码审查一样。网页CSS重构应该被安静的，持续的和低调的完成。它需要我们把工作精力分出一部分给它，它需要在我们的工期评估和风险评估中考虑到它的存在。如果做的正确，你不需要去解释或向外人验证这部分工作。

花几分钟、一两个小时做网页CSS重构，就像是你开发过程中的一种修改，是工作的一部分。如果它让你花了数天时间，或者更长，那不是网页CSS重构;那是重写，或重新设计。如果你需要明确的留出一部分时间(或整个sprint周期)来网页CSS重构HTML代码，如果需要为清理HTML代码而申请批准，或把清理HTML代码作为一个开发需求，那你不是在网页CSS重构——即使你用了网页CSS重构的技术和工具，你仍然做的是另外一种工作。