css - 给一个 html 元素添加多少个类太多了？

Question

我非常喜欢新的 Metro UI，因此我正在使用基于磁贴和 Metro UI 的网格制作演示网站。

我知道有像 get 这样的包你可以下载来完成大部分工作但是因为我是网页设计的新手(大约 5 个月的经验)我有更多有趣的逆向工程东西使用 Chrome 中的内置检查器和火狐。

我从瓷砖的尺寸和颜色开始。我希望能够拥有数十种不同的尺寸，并且我希望它们能够轻松创建。现在我正在分别为宽度和高度创建类，也为每种颜色创建类，然后我有一个悬停边框和所有颜色选择器的焦点。

到目前为止，这是我的 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 中做任何我想做的动画，以确保最好的兼容性。

当这一切都说完之后，我将为每个 div 设置大约 6 或 7 个类，所以这种方法太多了吗？我的方法是不是很糟糕？我更像是一个开发人员而不是设计师，所以任何提示和建议都将不胜感激。

另外，为了让图 block 保持间隔，我应该只为每个尺寸选择器添加一些边距，还是有更优雅的解决方案？

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

Answer 1

添加(太多)许多类的最大风险是您会犯更多错误。浏览器可以很好地处理类。如果您想优化性能，您可能会对这个主题感兴趣:CSS Optimization: Element ID vs. Class