2

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

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

我正在尝试“重新设计”一个使用div's 和ul's 等很好地构建的现有网站，并且它有一个很好的现有 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;
}

任何帮助，将不胜感激。

4

4 回答 4

1

如果我这样做，我将广泛使用 WebKit 的 DOM-inspector（在 Safari 或 Chrome 中通过右键单击页面并选择 Inspect Element 可用）。我希望这对您将注意力集中在节点/类/id结构上以及在您编写新css时帮助调试它都有很大帮助。

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

于 2010-03-29T04:22:00.017 回答
1

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

一个非常方便的工具以及用于 javascript 调试。

于 2010-03-29T04:54:31.377 回答
1

crimson_penguin 和 Jon P 都提出了可以使用的好工具，所以我会为您提供一些一般性的建议。

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

首先，了解您希望最终产品的外观。准备好设计，这样您就可以从一开始就知道您想在哪里结束。也不要吝啬任何细节，“训练越流汗，战斗流血越少”

其次，熟悉当前的 CSS，因为您很快就会非常熟悉它。如果您觉得有必要对您更满意的东西重新排序，也许可以通过将作用于特定层次结构的东西组合在一起。

例如：

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

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

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

于 2010-03-29T05:14:48.087 回答
0

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

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

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

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

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

我认为这可能是唯一有效的方法，它有机会以某种程度的信心转换页面，没有任何东西被破坏。我们根本不会更改 HTML 元素结构，所以最初，工具的输出应该与当前完全一样，但是有了适当的结构，我们就可以开始对整个应用程序的外观进行更改对正确的类等进行单点编辑。

为此，我已经找到了一个工具，它可能完全符合我的描述——它来自 LinkedIn，它被命名为CSS Blocks。他们提到了另一个用于优化 CSS 的工具，名为 OptiCSS（听起来像“光学”），但显然它还没有为黄金时间做好准备。

无论如何，我希望其中一些有意义并且有用。如有问题或意见，请随时给我发电子邮件。

于 2019-01-22T07:47:56.333 回答