Html 我应该如何更好地组合众多的样式声明？

（1）在样式声明中堆叠选择器，（2）在HTML标记中堆叠类，或者（3）在唯一选择器中堆叠重复声明，这样做更好/更快吗

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

1（类选择器重复）：

.1、.2、.3{颜色：白色}
.1、.2{背景：蓝色；高度：30px}
.1、.3{宽度：800px}
.2、.3{字体大小：16pt}
.1{字体大小：10pt}
.two{宽度：650px}
.3{背景：#333}

2（内联类是重复的）：

.white{color:white}
.bluebg{背景：蓝色}
.HeightThree{高度：30px}
.widthEight{width:800px}
.SizeSixten{font size:16pt}
.1{字体大小：10pt}
.two{宽度：650px}
.3{背景：#333}

3（声明重复）：

.one{颜色：白色；背景：蓝色；高度：30px；宽度：800px；字体大小：10pt}
.two{颜色：白色；背景：蓝色；高度：30px；字体大小：16pt；宽度：650px}
.three{颜色：白色；宽度：800px；字体大小：16pt；背景：#333}

我曾经使用第三种方法创建网站，但我发现，如果我决定更改网站的配色方案，则很难更改值。我必须为

background:blue

执行查找/替换，然后将其更改为其他内容（但如果我的一致性较差，则查找/替换可能无效）。现在，我结合使用第一种和第二种方法，并优先使用第一种方法。我决定哪些元素应该共享样式声明，并在样式表中将它们分组在一起

第一种方法使用更少的字符（至少在本例中是这样），所以我知道它会产生更小的文件大小的HTML文件，但我不确定loadtime；可能还有其他我不知道的事情

---

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

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

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

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

---

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

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

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

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

---

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

这是W3C顽固拒绝向CSS添加变量造成的问题。他们认为层叠样式提供了一个完全可以接受的替代方案，但在许多情况下，层叠样式显然不是这样，而且CSS应该足够简单，即使在这一点上，您确实需要经过专门培训，以处理其快速增长的复杂性，但业外人士也可以在不经过编程培训的情况下选择它

方法#1 第一种方法的问题是，因为美学设计并不总是逻辑结构，所以不可能逻辑地组织你的风格，并且仍然使用这种方法

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

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

方法#2 因此，许多开发人员选择了第二种选择。但是，由于网站的美观性很少与语义相关，因此它们最终会使用诸如

blue

、

red3

或

原色

、

secondary color

、或

width-1col

和

width-3col

等类名，但这是一个同样糟糕的选择，因为它完全违反了内容和表示的分离。也许在您当前的设计中，搜索框、类别菜单和社区投票都呈现在右栏中，并且具有相同的宽度，但情况并非总是如此。因此，如果重新设计站点，除了CSS之外，还必须修改HTML

那么解决办法是什么呢？ 大多数开发人员都支持我们

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

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

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

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