Take care about your comments format

These days I was tangling with some media query to allow using a different css file in mobile platforms than in desktop ones.

After I set inside my base page the viewport like:

<meta name="viewport" content="width=device-width,initial-scale=1"/>

and adding the two css files:

<link rel="stylesheet" href="css/styles.css" type="text/css" 
      media="screen"/> 
<link rel="stylesheet" href="css/min-styles.css" type="text/css" 
      media="only screen and (max-width: 480px)"/>

I just noticed that my css class  for second file (I had just one class at first for testing) is not loaded.

I put some other classes inside css file and use them inside different places, and they work! But the first did not. I saw that all other classes where used inside basic html pages, while the first was used inside a modal window, and I thought that there is a problem with the modal window and media queries ...

After some time I realized that the problem was generated by a wrong comment inside css file. It was something like:

<!--  phone in portrait mode, or PCs w/Browser windows reduces to 
      480px wide or less -->

And this is a comment format used inside XML files , not CSS! After I used the right format:

/*  phone in portrait mode, or PCs w/Browser windows reduces to 
    480px wide or less */

my first class was loaded.

The lesson learned from this is that always take care about your comments! If you copy them from somewhere else, be sure that the comment tags are suited for your specific file!