Hey,

today i ran in a question and now i want to read your comments about my "problem".

I'm creating a new responsive website. The design contains several boxes with fixed widths and heights. To understand my problem i have two code snippets.

Snippet 1:

@media only screen and (min-width: 320px) {
  .box {
    float: left;
    width: 100px;
  }
}
@media only screen and (min-width: 480px) {
  .box {
    width: 200px;
  }
}
@media only screen and (min-width: 960px) {
  .box {
    width: 300px;
  }
}

Snippet 2:

@media only screen and (min-width: 320px) {
  .box {
    float: left;
  }
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
  .box {
    width: 100px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 959px) {
  .box {
    width: 200px;
  }
}
@media only screen and (min-width: 960px) {
  .box {
    width: 300px;
  }
}

So is it better to just override classes or keep them only relevant for their screensize. What advantages do I have, what disadvantages? Just add some to the list.

Snippet 1 - Advantages - sometimes less code

Snippet 1 - Disadvantages - I can't remove for example the width:200px to reset the box, I have to write something like auto or 100%

Snippet 2 - Advantages (I don't repeat snippet 1's disadvantages) - sometimes cleaner separation of the different sizes

Snippet 2 - Disadvantages (I don't repeat snippet 1's advantages)

I'm really curious what your answers will be... Cheers