Css 一个html元素中添加了多少类太多？

我真的很喜欢新的Metro用户界面，因此我正在使用tiles和基于Metro用户界面的网格制作一个演示网站

我意识到有像get you download这样的软件包可以完成大部分工作，但由于我对网页设计相当陌生（大约有5个月的经验），我使用Chrome和Firefox中内置的Inspector进行了更有趣的反向工程

我从瓷砖的大小和颜色开始。我希望能够有几十个不同的大小，我希望他们能够很容易地创建。现在，我正在分别为宽度和高度创建类，也为每种颜色创建类，然后我为所有颜色选择器的悬停和聚焦创建了一个边框

到目前为止，我的html是这样的：

<div id="tile-wrap">
  <div class="std red"></div>
  <div class="wide x-long green"></div>
  <div class="x-wide xx-long blue"></div>
  <div class="xx-wide xxx-long purple"></div>
  <div class="x-wide long gray"></div>
  <div class="wide x-long black"></div>
  <div class="x-wide xx-long white"></div>
</div>

因此，通过这种设置，我已经可以有17种不同的尺寸

现在，我想我还将为各种图标以及文本大小和样式制作选择器。我想我会在jQuery而不是CSS3中做任何我想做的动画，以确保最佳的兼容性

当这一切都说了下来，我将有6或7类，为每个部门，所以这是一个很大的方式，是我的方法相当可怕？我更像是一个开发者而不是设计师，所以任何提示和建议都将不胜感激

另外，为了保持瓷砖之间的间距，我应该只在每个尺寸选择器上添加一些边距，还是有更优雅的解决方案

---

谢谢大家，我只是想提高我的设计技能，并在这个过程中获得一些乐趣。

增加（太多）类的最大风险是你会犯更多的错误。浏览器可以很好地处理类。如果您想优化性能，这个主题可能很有意思：

我会尝试将这些属性中的一些分组，以描述特定大小的框（即，特定宽度、高度、填充、边距、字体大小等）

我最近看到的最好的技巧之一是只创建小的可重用类，无论它们在页面上显示在哪里，它们看起来都应该是一样的。i、 e.a.blue box类无论出现在何处都应该是相同的，所以不要将#content.blue box视为与#footer.blue box不同

以下视频概述了一些阻止CSS“失控”的良好实践：

---

我认为您不会注意到任何性能问题（除非用户的连接非常非常慢），但您真的需要这么多的类吗？您可能可以组合一些类。看看你是如何使用css类的，我认为这是一个很好的方法。我希望我能读一读