Optimizing and Organizing Media Queries

ByFelipe Fialho in

When it comes to Mobile First, Media Queries and Code Optimization I have one rule: Avoid maximum reset properties.

Starting from the beginning

The 9th edition of the CSS Meetup was about Media Queries. The talk was very well presented by Matheus Marsiglio and then we had a great technical debate on the subject.

I was happy to know that a lot of people are already using the componentization approach of Media Queries, a subject that I have already dealt with in this post and most recently had a Raphael Fabeni article about it.

Although I have already talked about it, the subject is so interesting and important that worth it a new article .

“Turn this site into mobile?”

A few years ago, when people began to realize the importance of having a mobile site and noticed that there was no sense in having two versions for the same site, we began to apply the principle of responsiveness in our projects.

But neither we or the customers were too prepared to handle it. And we used the weapons that we had to solve this issue, and these weapons can be summarized in: many displays: none and a lot of property reset.

The normal thing at the time was to have a separate style sheet, or a space at the end of the file, where we adapted the design for that dreamy mobile version.

This technique had several problems. The site was not necessarily intended for smaller devices, it only gained an adaptation. Apart from all the usability issues, we had another serious question: maintenance.

However the code was organized, it was very difficult and annoying to maintain, and if, for example, some class was removed from the CSS, we did not always remember that it was duplicated in another file or at the end of CSS, with that the code stayed Full of unnecessary things that were not even being used.

If you’re still using this approach, maybe it’s time to try to use other concepts.

And then Mobile First gained force!

After some time, with people using smartphones frantically, we began to give more importance to the mobile access. And this was growing so that we concluded that it made more sense to start designing the project, and also the code, by devices with smaller screens and growing progressively, this technique became known as Mobile First.

My First Mobile Style 🙂

As I said at the beginning of the article, when it comes to optimizing the code for this methodology my main rule is to avoid resetting properties to the maximum.

It is good to warn that IE7 and IE8 ignore Media Queries; So if you have to provide support for these browsers I recommend Respond.js. So, everything will work perfectly (it even seems …) in these browsers.

The first point is that I create some breakpoint variables and replicate them as needed. I picked up this custom by the time I used the Bootstrap and kept it up today, I think it makes sense and makes the flow better.

// Media Queries 
// --------------------------------------------------

$screen-xs = 480px // Extra small screen  
$screen-sm = 768px // Small screen 
$screen-md = 992px // Medium screen  
$screen-lg = 1200px // Large screen  
$screen-xlg = 1600px // Extra Large screen  
$screen-xxlg = 1900px // Extra Large screen  
$screen-xs-max = ($screen-sm - 1)
$screen-sm-max = ($screen-md - 1)
$screen-md-max = ($screen-lg - 1)
$screen-lg-max = ($screen-xlg - 1)
$screen-xlg-max = ($screen-xxlg - 1)

The second point is that I use Stylus and ALWAYS add the Media Query lines nested inside the element, not at the end of the component’s file, let alone in a separate file.

    @media (min-width $screen-sm)

The third point is that in the examples in this article I will not take into account very specific properties of each device, retinal resolutions, or anything of the kind, but the concept is exactly the same.

Real situation

Let’s think about the following situation, which is very common: you have a menu, and the “mobile” and “desktop” versions are completely different from each other.

  • In the mobile version it must be fixed with a hamburger button and the menu will only be visible after clicking the button. When items are visible, they should be in blocks one below the other.

It would be exactly like this:

See the Pen Menu – Mobile Example by Felipe Fialho (@LFeh) on CodePen.0

  • In the desktop version, it should always be visible, it should not be fixed and the items should be placed next to each other

Then it would look like this:

See the Pen Menu – Desktop Example by Felipe Fialho (@LFeh) on CodePen.0

Note that I use the same HTML (Jade) in both examples.

Now let’s combine the two codes following my methodology

The result will be this! (You can resize to see the changes)

See the Pen Menu – Responsive Example by Felipe Fialho (@LFeh) on CodePen.0

Look closely at the code.

How was it done?

  • Everything that is standard for both resolutions stays outside the Media Queries
  • Specific properties, which should only work in a given resolution, fall within the related Media Query

I did not clear any properties and avoid unnecessary code being rendered in resolutions that should not work.

“But if I add a bunch of nested breakpoints inside the elements am I not going to add a lot of extra code?”

NO! : D

Luckily, we have plugins for Grunt and Gulp that solve this problem.

They will do an analysis throughout your CSS, unify the same Media Queries and play at the end of the file. The same way it was done before, but without having to have contact with this messy code.

It was clear? Do you like it? I await feedbacks;)

Leave a comment! 0

read more