Arranging CSS for a responsive site

HTML & CSS
1

When doing a responsive site I’m sold on putting all the CSS into a single file. However, how do you arrange your CSS? For example, you could have core CSS first and then do something like:

@media only screen and (max-width: 480px) {

    /* Mobile styles */

}

@media only screen and (min-width: 481px) {

    /* Desktop styles */

}

Or you could do either the mobile or desktop style without a media query and then simply have one media query per breakpoint that overrides the old styles where necessary. Even though CSS is made to cascade in this way, I don’t know if it’s just me, but I find the first way cleaner. However, I am thinking while I still support IE 8 if I do the desktop style first and then override for mobile, tablet, etc doing the desktop style, it will work on IE 8 without the need for conditional statements.

I know there’s no right or wrong answer here, just interested to hear people’s approaches.

Finally, am I right in saying the if you have something like this…



div.element { background-image: url('/img/desktop.jpg'); }

@media only screen and (max-width: 480px) {

    div.element { background-image: url('/img/mobile.jpg'); }

}

…most browsers won’t download both images if they don’t need to?

Thanks.

2

I have been using this style for quite sometime and have had no problems so far


  #pageWrapper      {width:94%; min-width:40em; max-width:78em; margin:0 auto 1em}
  #columnWrapper    {overflow:hidden; width:100%; text-align:left}
  #contentWrapper   {float:left; width:100%;}
  #content          {margin:1em 14.9058em 1em 0; padding:0 1em}
  #sideBarWrapper   {float:left; width:11.9058em; padding-top:1em; margin-left:-14.9058em}
  #firstSideBar,
  #secondSideBar    {margin:0 -3em 0 2em; padding-left:0.5em;background-color:#fff}
@media only screen and (min-width:64em)
{
  #pageWrapper    {max-width: 78em}
  #content        {margin:1em 14.9058em}
  #sideBarWrapper {float:none; width:auto; margin:0}
  #firstSideBar,
  #secondSideBar  {position:relative; float:left; 
                   width:11.9058em; min-height:12em;
                   padding:0 0.1em 0 0.5em; border:solid 1px #fee }
  #firstSideBar   {margin:0 0 0 -12.9058em}
  #secondSideBar  {margin:0 -14.9058em 0 0; left:-100%}
  }

@media only screen and (max-width:40em)
{
  #pageWrapper    {min-width:12em; width:100%; padding-top:3em}
  #content        {margin:3em 0 1em;border:0}
  #sideBarWrapper {float:none; width:auto; margin:0}
  #firstSideBar,
  #secondSideBar  {background-color:#fff; min-width:25em}
  #firstSideBar   {float:left}
  .fs2            {font-size:xx-small}     
  .smiling        {/*font-size: .55em*/}
  .pinkOct img,
  .pink888        {height: 50px}
  }
3

There are many approaches, and there’s no right way as such. You tend to change over time. I’s starting to favor the method where you go mobile first. That is, you create styles (with no @media rules) that will suit small screens and perhaps older browsers that don’t recognize @media (as long as you’re OK with IE8 and under getting a plainer, linear small screen layout … which they deserve, IMHO!)

I sued then to have blocks of @media rules under all that. But these days I’m leaning twards inserting @media rules where they are needed amid the default code. I find it easier to keep track of the variations that way, rather than having rules spread all over the place. Yes, it means you end up with more @media {} blocks, but I find it better overall.

Unfortunately, tests have shown that you can’t rely on that being the case. Many devices download background images even if not for them. :frowning:

4

I prefer to mix in the media queries with the rules (or sections) to which they apply.

If I’m constructing a nav then I will code the nav styles and then immediately follow with a media query (if needed). In that way when I make changes to the nav at a later data (as you always do) then the media queries are right there and don;t get forgotten about. Otherwise you would have to go and look every time you made a change to see if there was also a media query for that rule; very time consuming.

RWD isn’t about creating separate pages for various screen widths (unless you are still tied to old school fixed width designs) its about adjusting element by element when that element needs to change. It’s usually a couple of small tweaks here and there to make designs compress/expand nicely so the idea of separate style sheets for media queries would make things really awkward.

I don’t use any set breakpoints but just open and close the window and decide at which point the design starts to look bad or doesn’t work and then I will set the breakpoint and adjust the element that needs adjusting. I find that this approach is much more intuitive although it does lead to more media queries than other methods but I find it so much easier especially on large sites.

I’d like to see an updated version of those tests as I would hazard a guess that very few (if any) modern devices will load the background image twice these days.