Where to put CSS media queries? everyone after related element (class style) or gather them at the bottom of CSS file? which one is standard? or which one do you prefer?
|
|
|
It mostly depends on your project because at the end of the day it is all about maintenance and adding more stuff to it easily. So, if you are working on a project which only has a few media queries I would suggest leaving them all in one stylesheet but putting comments on top of it to make it explicit and also easier for you to find it later. However, if you know you are going to have a lot of properties meticulously defined in your media queries and also have various devices defined then I would suggest separating them out just for readability/maintenance reasons. |
|||
|
|
|
I found this source helpful in answering this question. CSS Declaration Order. When reading this link it talks about the order in which CSS code is placed. "Related property declarations should be grouped together in the following order: As for your question, it talks about media query placement having to say this about it, "Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future. Here's a typical setup." All this information can from this man's website linked above: Mark Otto @mdo Director of Design at GitHub. Creator of Bootstrap. Previously at Twitter. This helped in giving me some sort of place to start as far as CSS code organization. |
|||
|
|
