我怎样才能更好地结合众多样式声明？

Question

（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文件，但我不确定加载时间;还有其他我不知道的事情。

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

Answer 1

我喜欢第3种方法和第1种方法。

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

当使用第三种方法时，它可能是重构的噩梦，这里有其他语言转换为CSS的角色，即SASS和LESS。这些语言允许您在变量和函数中存储重复的部分（通常称为“mixins”）。

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

Answer 2

这是由W3C顽固拒绝向CSS添加变量引起的问题。他们认为级联风格提供了一种完全可以接受的替代方案，在许多情况下显然不会这样，并且CSS应该足够简单以至于非专业人员可以在没有编程培训的情况下接收它 - 即使此时你确实需要经过专门培训，以应对其迅速增长的复杂性。

方法＃1

第一种方法的问题在于，由于美学设计并不总是逻辑结构化，因此无法对文体进行逻辑组织，仍然使用此方法。

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

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

方法＃2

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

那么解决方案是什么？

大多数开发人员使用3的组合。当美学组织与站点/ UI组织对齐时，他们使用选项1。当美学结构与语义结构对齐时，他们使用选项2。当1和2失败时，他们会回到选项3上。

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

Sass和LESS等项目将从数十年的软件工程中学到的精彩课程和知识应用到CSS。现代编程语言没有简单的复杂语法来满足程序员的自负。编程语言与软件工程学科一起发展，因为程序员发现编写可维护/可管理代码需要某些特性和结构。

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

Answer 3

作为我的观点，这个更好

<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>