4

我真的很喜欢新的 Metro UI，所以我正在制作一个使用磁贴和基于 Metro UI 的网格的演示网站。

我意识到有像 get 这样的包可以下载来完成大部分工作，但由于我对网页设计非常陌生（大约 5 个月的经验），我使用 Chrome 和 Firefox 中的内置检查器获得了更多有趣的逆向工程。

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

这是我的 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 个类，所以这种方式太多了，我的方法很糟糕吗？我更像是一名开发人员而不是设计师，所以任何提示和建议将不胜感激。

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

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

4

2 回答 2

1

添加（过多）类的最大风险是你会犯更多的错误。浏览器可以很好地处理类。如果您想优化性能，可能会对这个主题感兴趣：CSS 优化：元素 ID 与类

于 2012-11-26T13:31:59.473 回答
1

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

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

以下视频概述了一些防止 CSS“失控”的良好做法：

Velocity 2010：Nicole Sullivan，“Massive CSS 的 5 大错误”

于 2012-11-26T13:44:58.940 回答