0

I'm currently working on an header for some website. This header consists of two different designs:

Floating/horizontal header:

+-------------------------------------------------------------------------+
|      +--------------+                       +--------------------+      |
|      |     LOGO     |                       | Menu | Menu | Menu |      |
|      +--------------+                       +--------------------+      |
+-------------------------------------------------------------------------+

Centered header:

+-------------------------------------------------------------------------+
|                          +--------------------+                         |
|                          |        LOGO        |                         | 
|                          | Menu | Menu | Menu |                         |            
|                          +--------------------+                         |
+-------------------------------------------------------------------------+

The centered header should be used, when the browser width is smaller than some breakpoint value. Otherwise the horizontal header. This can be achieved via CSS media-queries. My question is what the better code organisation would be for the header.css file:

  1. Only use code intersection of the two designs (font-family, container-width: 100%, etc.) together with two media queries.

Pseudo code:

/* Code necessary for both designs */

@media-query (width < breakpoint) {
  /* upgrade code to centered header */
}

@media-query (width >= breakpoint) {
 /* upgrade code to floating header */
}
  1. Always use centered header + media-query to override necessary pieces:

Pseudo code:

/* Code necessary for centered designs */

@media-query (width >= breakpoint) {
 /* Overwrite centered header code */
 /* Insert floating header code */
}

My question is what are the pros/cons of these two css structures? How about code duplication. The first one always uses a media-query to display anything useful. The second one needs to overwrite some of the first centered headers features.

I hope this doesn't get closed, because it's too subjective. I'm only asking for pros/cons, not what design to chose or which one is better...

1 Answers1

0

I would definitely not suggest your first example, based on readability and just general CSS principles. The idea of using both a greater than AND a less than is redundant and somewhat confusing - it's the equivalent of doing two if statements for one condition.

Order your media queries in either descending or ascending order, leaving your default styles as either the screen at its largest, or at its smallest.

Personally I define all the full-width styles outside of any media query, and then use max-width as I traverse down the stylesheet, defining smaller and smaller screen sizes. That being said, the opposite is also completely acceptable and common, where you define your mobile sizes outside of any media queries, and traverse downwards increasing in size (using min-width). Both methods create an easy-to-follow example - if I were to work on this file after you, I would know exactly where to find the change I'm looking for.

I'd say one thing that should be agreed upon though is that using both min-width and max-width in your @media queries is never a good idea.

Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • Thank you for your response. I'm actually thinking about writing the header with [SASS](http://sass-lang.com). In SASS I'm able to use function-like functionality to use something like `upgrade_to_centered()`/`upgrade_to_floating` in two `media-queries` (this is cleaner I think). The final CSS would look like the first example above. Would you still go with the second approach? I just think, that it would be a bit painful to first of all reset the *default* design before setting the new one in a `media-query`. This does not occur with two media-queries.. –  Oct 05 '16 at 14:47
  • Two media queries is just extra work and generally redundant. If you do `#myDiv { color: red; } @media only screen and (max-width: 500px) { #myDiv { color: blue; } } `, it is the exact same thing as doing `@media only screen and (min-width: 501px) { #myDiv { color: red; } } @media only screen and (max-width: 500px) { #myDiv { color: blue; } } ` It's extra unnecessary markup and is *less* readable, which is the opposite of what you want in your external file includes. – Tyler Roper Oct 05 '16 at 14:50
  • You are right. I only had something in mind like `#myDiv { display: inline-block; font-size: 10px; } @media (max-width: 500px) { #myDiv { display: block; font-size: 12px; } }` vs. `@media (min-width: 501px) { #myDiv { display: inline-block; font-size: 10px; } } @media (max-width: 500px) { #myDiv {font-size: 12px; } }` (one line less, but this adds up..). –  Oct 05 '16 at 14:54
  • Yes, it's the equivalent of doing `if (myVariable > 500) { do this } if (myVariable <= 499) { do this }` - It works, it's just unnecessary. – Tyler Roper Oct 05 '16 at 14:57
  • My example uses one line less. Since it doesn't need to reset the `display` to `block`. Did you notice that? This will add up with more advanced code I think, but I will still use your approach, since - as you already mentioned - it's the more separated way. –  Oct 05 '16 at 15:10
  • In your example, just remove the second media query and put that rule beforehand, like so: `#myDiv { font-size: 12px; } @media (min-width: 501px) { #myDiv { display: inline-block; font-size: 10px; } } ` - Like I said, in some cases you may want to define the smallest size and use media queries to move UP in size if you find it more appropriate. – Tyler Roper Oct 05 '16 at 15:30