0

This is more of a best practice question.

I am working on a Bootstrap and Sass based website, I am importing partials in the beginning in the "main.scss" file, however for the media queries this means I have to re-write code for some breakpoints since media queries are loaded first and then the rest of the page styles. For e.g.: 

// _media_queries.scss (loaded first)

@media(max-width:767px) {
   .vertical_switch{
       width:100%;
       padding: 0;
   }
}

// main.scss (loaded second - overrides mobile breakpoint)
.vertical_switch{
   width: 50%;
   padding: 20px 0;
}

My scss imports:

// Imports

@import '_mixins';
@import '_preloader';
@import '_media_queries';

// Rest of the page styles

Is it a good idea/best practice to load the media queries at the end? In a single Sass file I would do that, but I would like to know how to get around this dealing with partials.

Mauritius D'Silva
  • 27
  • 4

1 Answers1

2

I usually setup my 'partials' based on components. I don't need a separate file with media queries and just keep them within the same component. Let's say I'd have a nav component, my sass would look something like:

.nav {
    width:100%;
    padding: 0;
    @media(min-width:767px) {
         width: 50%;
         padding: 20px 0;
    }
 }

I believe this allows for more readability and easier maintenance/scaling

Maarten
  • 635
  • 2
  • 8
  • 22
  • I've tried this before, adds up bulk to the file due to the repeated breakpoint re-assignment styling. In a single file however, all the styling is under one @media {} block. – Mauritius D'Silva Aug 09 '17 at 07:45
  • Yes it's a matter of preference. I tried both and sticked with the above. What do you mean with "adds up bulk to the file due to the repeated breakpoint re-assignment styling"? Not sure what you're trying to say here. – Maarten Aug 09 '17 at 07:59
  • For eg: if there are say 50 css changes for mobile breakpoint for each of the change the @media{} will be written, so 50 additional @media blocks will be added to the file. – Mauritius D'Silva Aug 09 '17 at 08:03
  • You mean in the generated output file? – Maarten Aug 09 '17 at 09:00
  • Yes, the generated output file will contain all the additional lines of @media blocks as included in the source file. – Mauritius D'Silva Aug 09 '17 at 09:04
  • 1
    Ah so that's your concern. Well apparently it doesn't have any impact on performance. You could also optimize your CSS again by using something like [https://github.com/css/csso](https://github.com/css/csso), which is always a good idea, regardless of the approach you take. I for one, am not willing to sacrifice project organisation over the output my setup generates. But that's totally up to you of course. – Maarten Aug 09 '17 at 09:15