Responsive CSS, best code technique, override css rules?

[un_dee]

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

[simoncmason]

I work my way up – so similar to your example 1.

In this way I only need to alter styles which need to alter as the screen size grows.

I see this as an extension of the cascade so styles flow up the screen sizes until over-written with something more specific – i.e. based on a relevant media query.

But – if I have a style which I only want for the smallest screen size for example then I will limit it with a max-width query but I never use min-width= & max-width= type queries – I’ve never found I needed them.

I don’t think any one approach is “better” though – it is up to you which you find easiest to work with.

[Author]

Posts