For every project, my media-queries follow the main CSS styles in a uniform manner, as so:
/* CSS styles */
/* CSS styles */
/* CSS styles */
/* Media queries */
/* Media queries */
/* Media queries */
Currently I am using SASS, and I have a lot of partials, so I thought - why not place media queries directly in each respective partial, saving time to search back on my previous placement decisions.
Meaning, I would like to use the following CSS output from my SASS(scss):
/* CSS Styles */
/* Media queries for the above CSS*/
/* CSS Styles */
/* Media queries for the above CSS*/
/* CSS Styles */
/* Media queries for the above CSS*/
Does this affect performance? From my point of view, this would actually make the process faster in a way, e.g. > you have this class, these are the responsive styles - voila.
I have read numerous threads and posts, but there is no end formula for this.
Is this a good practice and if not - why?
According to this question the order of your CSS code doesn't matter because the browser needs to parse the whole CSS file to start the rendering process.
If you're worried about performance you should start by looking at other things such as your JavaScript code (if any) and the number of CSS rules you're using. You can also try to minify and/or compress (using Gzip) your code (assuming you haven't done this yet).
As a final answer, I would say just place the code wherever suits you best, I would go for your second approach because I think that makes the code easier to understand, but that's just my opinion.