4

I really enjoy the new Metro UI and so I am making a demo website using tiles and Metro UI based grids.

I realize that there are packages like get you can download to do most of the work but since I am pretty new to web design (about 5 months experience) I have more fun reverse engineering stuff using the built-in inspectors in Chrome and Firefox.

I am starting with the size and colors of the tiles. I want to be able to have dozens of different sizes and I want them to be created easily. Right now I am creating classes for the width and height individually and also classes for each color and then I have a border for hovers and focuses for all color selectors.

This is what my html looks like so far:

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

So with this setup I can already have a total of 17 different sizes.

Now, I figure I will also make selectors for various icons and also ones for text size and style. I think I will do whatever animation I want in jQuery instead of CSS3 to ensure the best compatability.

When this is all said and down I am going to have like 6 or 7 classes for each div so is this way to much and is my approach pretty terrible? I am more of a developer than designer so any tips and recommendations would be greatly appreciated.

Also, to keep the tiles spaced apart, should I just add some margins to each of the size selectors or is there a more elegant solution?

Thanks guys, I am just trying to sharpen my design skills and have some fun in the process.

user1465298
  • 106
  • 1
  • 7
  • I don't think you will notice any performance issues (unless the users have a really, really slow connection), but do you really need so many classes? You can probably combine some of the classes. Look at how [jquery-ui](http://jqueryui.com/) are using css-classes, I think it's a nice way. – Mario S Nov 26 '12 at 13:27
  • i good thing would me to read http://smacss.com/ – meo Nov 26 '12 at 13:34

2 Answers2

1

The biggest risk of adding (too) many classes is that you will make more mistakes. Browsers can deal with classes just fine. If you want to optimize performance this topic might be of interest: CSS Optimization: Element ID vs. Class

Community
  • 1
  • 1
Henrik
  • 3,908
  • 27
  • 48
1

I would try to group some of those attributes into clases that describe boxes of certain sizes (i.e. a certain width, heght, padding, margin, font-size etc).

One of the best tips I've seen recently is to only create small reusable classes which should look the same no matter where they are displayed on the page. i.e. a .blue-box class should look the same no matter where it appears - so don't do #content .blue-box as being different from #footer .blue-box

The following video outlines some good practices to stop your CSS getting 'out of control':

Velocity 2010: Nicole Sullivan, "The Top 5 Mistakes of Massive CSS"

Chris Lewis
  • 1,315
  • 10
  • 25