MaDonghui
commented
7 years ago Thanks for the tips, the reason I write like that is that I want my CSS code struct like my HTML, I put universal rules on top of each of sections, and I put the @media at the bottom of each section so It would be easy for me to manage the whole project block by block, like objects oriented design, at least I think. And I kind of like it, I will do some research see if there is anything really bad about it, otherwise I will stick to it :p @farishkash thank you so much
Before you read my critique on this I want you to know this is page is amazing. I am going to use this as my example of going beyond and what this course offers and just being outstanding.
Now on to my issue.
You should only be writing the media query for each device width once, and at the very bottom of your page, not in the middle.
First we want as little css possible to get the job done you added technically with the closing } an extra 10 lines of code.
Second and more importantly confusion and additional errors.
So we have this screenshot below, this is from your media query that is in the middle of your css page. As you can see you don't know were it starts. You are working on your site and you are having issues with your css. You make changes here thinking that it is your desktop css when it is your media query or vice versa.
If you put your media query directly at the bottom of the page, that creates a clear line. Once you cross that line you are in media queries, there is no second, third, etc to jump to and worry about.
Lastly, maybe you aren't aware this, when you have multiple media queries for the same device width, if you break one, it may not load the rest of the css below it. So basically if you make a mistake forget a semi colon or closing } bracket, you could ruin your desktop site because of the location of your media query or ruin the same media queries for that device with because you wrote it multiple times.