css – 添加到html元素的类太多了？

2023年2月28日 289次阅读

我真的很喜欢新的Metro UI,所以我正在使用瓷砖和基于Metro UI的网格制作一个演示网站.

我意识到有一些软件包可以下载来完成大部分工作,但由于我对网页设计很新(大约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个类,所以这样做很多,我的方法很糟糕吗？我更像是一个开发人员而不是设计师,所以任何提示和建议将不胜感激.

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

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

最佳答案 添加(太多)课程的最大风险是你会犯更多错误.浏览器可以很好地处理类.如果您想优化性能,可能会对此主题感兴趣：
CSS Optimization: Element ID vs. Class

点赞