htmlcssresponsive-designmedia-queriesdesign-decisions

CSS code structure decision

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...

Solution

  • 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.