2

我在一家网络公司工作，我们将在其中一个主要网页上进行 A/B 测试，以测试 2 种不同的设计。A/B 将检查 2 种不同的设计方法：不同的图标、颜色、方案等，甚至布局中的细微变化。主要的变化是设计（我将在 CSS 中改变它们）。

假设我知道如何运行 A/B 测试：

我的问题是：如何处理 CSS 文件。

我的主要 CSS 在一个名为：generalStyles.css.

我需要创建一个名为的文件generalStyles_B.css吗？它会是该文件的副本还是该文件的补充，并且只是“运行”我正在更改的 CSS 规则？generalStyles.css

如果我们决定选择 B 选项，复制将使使用 generalStyles_B 变得容易。但是维护代码容易重复似乎是错误的。

谢谢， 阿隆

4

2 回答 2

4

这取决于您如何进行 a/b 测试。我将使用的方法如下，基本假设您使用两个不同的文件，例如 register-a.html 和 register-b.html。即使您使用的是为您输出页面的应用程序，您也应该控制两者的标记。另外，我假设您页面上的某个地方围绕您的内容有一个 div。

您的 html 在您的第一页上可能如下所示：

<div id="container" class="register-a">
 <h2>Title</h2>
 <p>Content Goes Here</p>
</div>

在您的第二页上，您可能有如下标记：

<div id="container" class="register-b">
 <h3>Title</h3>
 <p>Content Goes Here</p>
 <div id="registerBox">
  <input />
 </div>
</div>

为此，您不需要两张 CSS 表。由于类 'register-a' 和 'register-b' 您可以根据需要进行视觉更改。我会使用您正在运行的当前 CSS 表，并在您的样式中包含以下内容：

div.register-a p {font-size:14px}
div.register-b p {font-size:18px}

这将是一个明显的视觉差异。同样，这一切都取决于您首先如何进行 A/B 测试，以及您的代码在您的网站上的组织方式。希望这可以帮助。

于 2012-03-12T02:37:18.793 回答
0

我也建议，如果对特定页面上的背景等内容进行了更改，则可以将相同的 .css 与稍有变化的重复条目一起使用。

例如在原始css中，背景是“background.jpg”

body.home {
background-image:url('images/background.jpg');
background-color:#444;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
}

在变体中，背景是“background0.jpg”

body.home0 {
background-image:url('images/background0.jpg');
background-color:#444;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
}

所以在这种情况下，变体页面可以简单地引用 body.home0 而不是 body.home 而不会丢失任何其他格式。

于 2013-07-11T13:08:10.027 回答