title: Apply a media query specific style on click
body: <p>Here's my problem: </p>
  
  <p>I have a menu on the left side. When the screen is too small, the menu takes too much space, so i "minimize" it. 
  To do that, I apply a different style when screen width is less than a specific size in pixel. (with media query).</p>
  
  <p>But i would like to allow users to minimize the menu, even on large screen, with a button. Which means to apply the same style as in my media query.</p>
  
  <p>I know I could add a class to the container on a click on the button, and copy/paste the code from the media query for this class, but I suppose there's probably a better way to do it than duplicate the code.</p>
  
  <p>For now:</p>
  
  <pre><code> /* Classic style */
      #menu{
       width:100px;
       background-color:#ddd;
       padding:15px;
      }
      #menu li{
       color:red;
       padding:20px 20px;
      }
  
   /* Style when screen less than 600px */
      @media (max-width: 600px) {
       #menu{
        width:40px;
        padding:5px;
       }
       #menu li{
        padding: 10px 10px;
       }
       ...
       /* ...a lot more style... $/
      }
  
   /* Same style when class buttonClicked */
      .buttonClicked #menu{
       width:40px;
       padding:5px;
      }
      .buttonClicked #menu li{
       padding: 10px 10px;
      }
      ...
      /* ...a lot more style... $/
  </code></pre>
  
  <p>This is just a light example, but the style i apply on the menu is much more complex than that, so i would like to avoid duplicate the code if it's possible.</p>
  
  <p>Here's a JsFiddle: <a href="https://jsfiddle.net/rtnp67s2/3/" rel="nofollow">https://jsfiddle.net/rtnp67s2/3/</a></p>
  
  <p><strong>EDIT :</strong> Actually what I'm looking for is to do a <strong>code refactoring</strong> of the style. Is it possible ?</p>
  
  <p>Something like (obviously not working) : </p>
  
  <pre><code> /* Style when screen is less than 600px or when class .buttonClicked active */
  
      @media (max-width: 600px) OR .buttonClicked {
       #menu{
        width:40px;
        padding:5px;
       }
       #menu li{
        padding: 10px 10px;
       }
       /*... more than 100 lines of styling... */
      }
  </code></pre>
  
  <p>Thanks in advance!</p>