In another thread, I have come under some fire for how I organize my CSS in my first-ever responsive website.
Actually what @felgall is referring to is slightly different than my own question, so here goes…
It seems to me that there are two different ways you could organize your CSS for a responsive website.
First, you could add media queries for each component. For example, I have an ID called #services which displays what the company does. It is fairly involved, and changes a couple of times depending on screen width, so I have my base CSS and then media queries that just pertain to #services below it so I can see how this “object” changes depending on the device.
Secondly, you could organize all of your CSS based on each break point. So I might have a section with all of my CSS for an entire web page when it is viewed on a mobile phone, and then I could have another section for all of my CSS when it is viewed on a desktop. It would almost be a list of CSS based on the device width.
How do you organize things?
All I know is that while my home page looks awesome so far, it is also very complicated, and I’m not sure how to organize everything so it is easy to read and find things.
To be honest, based on some former websites that were not responsive, I had a similar issue.
Part of me wanted to created a CSS file for each page on the website, because most styles seemed to just apply to a given page. But then you have some styles that apply everywhere. And now that I am doing responsive design, things are even more complicated to manage!!