1

(1) 样式声明中的堆栈选择器，(2) HTML 标记中的堆栈类，或 (3) 唯一选择器中的堆栈重复声明是否更好/更快？

为了澄清我的问题，我将向您展示每个示例。每段代码都应该完成相同的最终目标，但我不确定最终加载速度是否会更快，或者这只是一个偏好问题。

1（类选择器重复）：

<style>
.one, .two, .three {color:white}
.one, .two {background:blue;height:30px}
.one, .three {width:800px}
.two, .three {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

2（内联类重复）：

<style>
.white {color:white}
.bluebg {background:blue}
.heightThirty {height:30px}
.widthEight {width:800px}
.sizeSixteen {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one white bluebg heightThirty widthEight"></div>
<div class="two white bluebg heightThirty sizeSixteen"></div>
<div class="three white widthEight sizeSixteen"></div>

3（声明重复）：

<style>
.one {color:white; background:blue; height:30px; width:800px; font-size:10pt}
.two {color:white; background:blue; height:30px; font-size:16pt; width:650px}
.three {color:white; width:800px; font-size:16pt; background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

我曾经使用第三种方法创建站点，但我发现很难更改值，例如，如果我决定更改站点的配色方案。我将不得不进行查找/替换background:blue并将其更改为其他内容（但如果我不够一致，查找/替换可能会证明无效）。现在我使用第一种和第二种方法的组合，并优先使用第一种。我决定哪些元素应该共享样式声明，并在样式表中将它们组合在一起。

第一种方法使用较少的字符（至少在这个例子中），所以我知道它会生成一个更小的文件大小的 HTML 文件，但我不确定加载时间；可能还有其他我不知道的事情。

有没有应该使用的方法？我已经指出了第三种方法可能带来的问题，但是还有其他我不知道的问题（任何三种）吗？

4

3 回答 3

2

我喜欢第三种方法和第一种方法。

在大多数站点上工作时，我尝试使用第一个服务，而不在很多地方（只有少数）重复选择器，以便它们保持控制。

当使用第 3 种方法时，重构可能是一场噩梦，这就是其他翻译成 CSS 的语言的作用，即 SASS 和 LESS。这些语言允许您将重复的部分存储在变量和函数中（通常称为“mixins”）。

我想你会非常喜欢 LESS http://lesscss.org/。我跳到一个现有项目，使用它来创建一些特殊的可重用 UI 小部件，所有 CSS 都使用 LESS，并且在没有先验知识的情况下，理解现有代码和编写新部分很容易。推荐用于新网站，而它或第一种方法适用于现有网站。

于 2011-12-27T07:00:31.150 回答
1

这是由 W3C 顽固地拒绝向 CSS 添加变量引起的问题。他们认为级联样式提供了一种完全可以接受的替代方案，但在很多情况下显然不是这样，并且 CSS 应该足够简单，以至于外行无需编程培训即可掌握它——即使此时您确实需要接受专门培训以处理其快速增长的复杂性。

方法#1

第一种方法的问题在于，由于美学设计并不总是具有逻辑结构，因此不可能在逻辑上组织您的样式并仍然使用这种方法。

例如，我通常通过 UI 分组和布局以及网站的广泛部分来组织我的样式。整个站点（或至少前端）可能有一个全局样式表，然后可能有一个特定页面布局或 UI 类型的样式表。在每个样式表中，不同的 UI/布局元素都有不同的部分。

问题是，样式在网站设计中并没有像那样分组。您的导航菜单很可能与您的评论框共享一种颜色；并且您的侧边菜单可能与您的搜索小部件共享宽度；并且您可能有来自站点不同部分的几种不同类别的 UI 元素，它们使用不同的布局但共享属性。通过视觉相似性来组织您的样式将是混乱的，更不用说不可能了，因为某些元素可能与 5 个不同的其他元素共享 5 个不同的属性。

方法#2

因此，这将许多开发人员带到了第二种选择。但是由于站点的美学很少与语义相关联，因此它们最终会使用类名，例如blue, red3or primary-color, secondary-color, or width-1colandwidth-3col等。但这是一个同样糟糕的选择，因为它完全违反了内容和表示的分离。也许在您当前的设计中，搜索框、类别菜单和社区民意调查都呈现在右栏中并具有相同的宽度，但情况可能并非总是如此。因此，如果您重新设计网站，除了 CSS 之外，您还必须修改 HTML。

那么解决方案是什么？

大多数开发人员使用 3 的组合。当美学组织与站点/UI 组织一致时，他们使用选项 1。当美学结构与语义结构一致时，他们使用选项 2。当 1 和 2 失败时，他们会求助于选项 3。

但是有一个更好的方法……修复问题的根源：CSS 实现。现实世界的经验告诉许多设计师和开发人员，CSS 设计在现实生活中并不像 CSS 工作组所期望的那样发挥作用。为了在编写可维护代码的同时实现丰富、复杂的设计，CSS 需要具有选择器继承、变量和混合。

Sass和LESS等项目将从数十年的软件工程中吸取的教训和知识应用于 CSS。现代编程语言没有复杂的语法来满足程序员的自负。编程语言随着软件工程学科的发展而发展，因为程序员发现某些特性和结构对于编写可维护/可管理的代码是必要的。

这为开发人员提供了编写高效、可管理的 CSS 和 HTML 所需的工具，而无需更改 CSS 规范。您只需使用 SCSS 或等效的元语言编写，然后让 Sass 为您将其转换为 CSS。有些人甚至将它与Haml配对，但我还没有发现需要走那么远。

于 2011-12-27T07:52:26.417 回答
1

作为我的观点，这个更好

<style>
.main div{background:blue;width:800px;font-size:16pt;color:white;}
.one, .two {height:30px}
</style>

<div class='main'>
<div class="one" style='font-size:10pt'></div>
<div class="two" style='width:650px'></div>
<div class="three" style='background:#333'></div>
</div>
于 2011-12-27T12:57:01.053 回答