CSS structure for creating responsive websites

Question

I'm a back-end engineer who works on a small team so occasionally needs to do some front-end. I like to develop a good workflow and project structure before I start anything, so I'm wondering about creating a responsive front-end for a web app.

What's a best-practice way to strcture CSS for creating responsive websites that need to "scale down" for smaller screens? Specifically: do you create the mobile version first, then expand the code with min-width media queries in the CSS? Or do you do the opposite, creating the desktop-resolution version first?

Secondly, do you define multiple element selectors and definitions in the same media query? Or do you define a media query for each element and selector? It would seem that the second method would make for more readable code perhaps -- although it's certainly more frustrating to "tweak" a working site to create a new version with media queries rather than simple fence-off the old settings in one media query and re-style the necessary parts from the new version from scratch.

Answer 1

If you are creating the structure for future web app development then go with mobile first approach. For the second question, I work it out as (just a snippet from my work):

@media all and (max-width: 420px) {
    section, aside, .col1, .col2, .col3 {
        float: none;
        width: auto;
    }
}
@media all and (max-width: 978px) {
    header, footer {
        display: none;
    }
}

You can further style it as per the requirement.

If the styles are common across multiple elements then I combine them as that reduces bytes for processing and then follow that with CSS specificity rules to generate element specific style.

Answer 2

I have found that creating a mobile site first is easier than making a desktop site respond to a mobile viewport.

As far as media queries, I use media queries for the typical screen sizes. Also, if there is a size that needs to have the layout tweaked, I will add another media query. So I will put multiple selectors in the same media query.

But in the end, its up to you to use the style you prefer and start with the screen size you like. Neither are wrong.

Answer 3

Use a css framework and learn from them

• Twitter bootstrap
• Foundation

Create the mobile version first.

• Forces you to prioritize important elements, creating an awesome UX

Use multiple CSS rules within the same media query