现有网站 CSS 替换（重新换肤）最佳实践，无需更改 HTML

Question

我可以看到与堆栈溢出上的 CSS 最佳实践相关的问题的许多其他很好的答案：

• 如何管理 CSS 爆炸
• CSS 约定/代码布局模型
• 在编写第一个样式表时，我应该遵循哪些CSS标准？
• 什么是最好的方法整理 CSS？
• 最佳实践 - CSS 样式表格式

但我认为我有一个不同的问题。

我正在尝试“重新设计”一个使用 div 和 ul 等精心构建的现有网站，并且它具有良好的现有 CSS文件，但当我开始更改 CSS 时，我很快发现我破坏了布局。我的感觉是，很难了解所有 CSS 如何协同工作，以及 CSS 到底在影响 HTML 中的父元素和同级元素。

所以，我的问题是“通过仅替换 CSS 而不修改现有 HTML 来重新设计现有网站的最佳实践是什么？”我无法更改类、ID、节点层次结构等。

我尝试重新设计的特定站点的示例是 http://demo.nopcommerce.com/。

现有的 CSS 可以像主 CSS 文件中的摘录一样复杂/详细：

.header-selectors-wrapper
{
    text-align: right;
    float: right;
    width: 500px;
}

.header-currencyselector
{
    float: right;
}

.header-languageselector
{
    float: left;
}

.header-taxDisplayTypeSelector
{
    float: right;
}

.header-links-wrapper
{
    float: right;
    text-align: right;
    width: 570px;
}

.header-links
{
    border: solid 1px #9a9a9a;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    display: inline-table;
}

.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
    border-bottom: 1px solid #c5c5c5;
    vertical-align: middle;
    line-height: 30px;
}

.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
    text-align: left;
    padding: 0px 10px 0px 10px;
}

.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
    font-weight: bold;
}

任何帮助将不胜感激。

Answer 1

crimson_penguin 和 Jon P 都推荐了一些很好用的工具，所以我将为您提供一些一般性建议。

这就是我在你的情况下会做的事情，尽管这绝不是解决方案。

首先，了解您希望最终产品的外观如何。准备好设计，这样您从一开始就知道您想要的结果。也不要忽略任何细节，“训练中流的汗越多，战斗中流的血就越少”

其次，熟悉当前的 CSS，因为你很快就会熟悉它。如果您觉得有必要对所有内容进行重新排序，以便您更喜欢某些内容，也许可以通过将按特定层次结构起作用的内容分组在一起。

例如：

#navigation {....}
   #navigation #left {....}
     #navigation #left h1 {....}
     #navigation #left p {....}
   #navigation #right {....}

一旦您有了设计并了解当前的代码，就开始进行一些更改。首先从简单的低级元素开始，例如文本块或图像。然后你就可以围绕这些进行构建。正如前两张海报提到的，Firebug（适用于 Firefox）和 DOM-Inspector（适用于 Safari/Chrome）非常有帮助，因为您可以在页面上尝试一些东西，而无需做出任何承诺，直到您看到它的外观。

这是一个漫长且可能充满压力的过程，但只要有一点耐心和毅力，您很快就会到达目的地。

Answer 2

如果我这样做，我将广泛使用 WebKit 的 DOM 检查器（在 Safari 或 Chrome 中右键单击页面并选择“检查元素”即可使用）。我希望它能帮助你理解节点/类/id 结构，并在你编写新的 css 时帮助调试它。

它比仅仅查看源代码方便得多，因为它是在树视图中，并且默认情况下节点是折叠的。它具有一些非常有用的功能，用于检查节点的度量（宽度/高度/填充/边框/边距），以及显示适用于它们的样式、顺序以及最终使用的样式。

Answer 3

我建议使用 Firefox 的 Firebug 插件。您可以在浏览器中查看页面时通过编辑现有 CSS 来预览 CSS 更改，而无需对 CSS 文件进行永久更改。您还将了解样式的“级联”等。

这也是一个非常方便的 JavaScript 调试工具。

Answer 4

我们刚刚开始对我的工作进行大规模的重新设计 - 大约 13000 个 JSP 页面，应用程序有超过 150 万行代码。

在我们的第一次计划会议上，我大笑起来，因为在大多数情况下，每个人都假设我们将对每个页面进行手动重构。手动重构绝对是我最不会考虑做的事情——这是最昂贵的方式，但产生的好处却最少。您获得的软件版本不会使重新设计变得更容易，但在其余时间必须并行维护。换句话说，你承担了责任。

无论如何，我将建议创建或找到一个实用程序来扫描 JSP 页面的 HTML 输出，以便它可以捕获每个元素上使用的实际最终 CSS。这将避免我们编写自己的 CSS 解析器来模仿 CSS 选择器的规则等。相反，我们将获得每个元素的每个 CSS 值的完整最终列表，并将此信息写入一组数据库表。从那里，我们可以分析 CSS 寻找共性，然后将其编写为共享类或混合（使用 SASS），并将其余部分编写为使用这些共享定义的元素特定类。

输出所有 CSS 后，该工具将在每个元素上使用适当的 CSS 类重写 JSP 文件。

应该指出的是，所讨论的任何页面之间几乎没有共同点。我认为，当我们对工具进行多次迭代微调时，我们也许可以将页面的特定部分识别为属于一组页面级组件，如面板、字段组、容器等。如果我们可以的话识别每个页面中的这些元素，我们最终可以注入实际的可重用组件来代替现有的 HTML。

我认为这可能是唯一有效的方法，有机会以一定程度的信心转换页面，确保没有任何内容被破坏。我们根本不会更改 HTML 元素结构，因此最初，该工具的输出应该与当前完全相同，但结构到位后，我们就可以开始对整个应用程序的外观进行更改对正确的类进行单点编辑等。

为此，我已经找到了一个可以完全执行我所描述的操作的工具 - 它来自 LinkedIn，名为 CSS Blocks。他们提到了另一个用于优化 CSS 的工具，名为 OptiCSS（听起来像“光学”），但显然它还没有完全准备好迎接黄金时段。

不管怎样，我希望其中的一些内容有意义并且有用。如果有问题或意见，请随时给我发电子邮件。