Media query mixin patterns in SASS - Performance & Optimization

Performance: Media query mixin patterns

MEDIUM IMPACT

This affects how CSS is loaded and applied, impacting page load speed and rendering efficiency.

Applying responsive styles using media queries in Sass

SASS

@mixin respond($breakpoint) {
  $queries: (
    small: '(max-width: 600px)',
    medium: '(max-width: 900px)',
    large: '(max-width: 1200px)'
  );
  @media #{map-get($queries, $breakpoint)} {
    @content;
  }
}

.element {
  @include respond(small) {
    font-size: 1rem;
  }
  @include respond(medium) {
    font-size: 1.2rem;
  }
  @include respond(large) {
    font-size: 1.5rem;
  }
}

Uses a map to centralize media queries, reducing duplication and CSS size.

📈 Performance GainSmaller CSS bundle and fewer style recalculations, improving load and render speed.

Applying responsive styles using media queries in Sass

SASS

@mixin respond-bad($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) {
      @content;
    }
  }
  @if $breakpoint == medium {
    @media (max-width: 900px) {
      @content;
    }
  }
  @if $breakpoint == large {
    @media (max-width: 1200px) {
      @content;
    }
  }
}

.element {
  @include respond-bad(small) {
    font-size: 1rem;
  }
  @include respond-bad(medium) {
    font-size: 1.2rem;
  }
  @include respond-bad(large) {
    font-size: 1.5rem;
  }
}

This pattern repeats multiple @media rules separately, causing duplicated CSS and larger file size.

📉 Performance CostAdds unnecessary CSS bytes and triggers multiple style recalculations during load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated media queries in mixins	No extra DOM nodes	Multiple reflows due to duplicated styles	Higher paint cost from redundant styles	[X] Bad
Centralized media query map in mixin	No extra DOM nodes	Single reflow per breakpoint	Lower paint cost with minimal CSS	[OK] Good

Rendering Pipeline

Media queries are parsed during CSS loading. Efficient mixins reduce CSS size and complexity, speeding up style calculation and layout.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large or duplicated CSS rules

Core Web Vital Affected

LCP

This affects how CSS is loaded and applied, impacting page load speed and rendering efficiency.

Optimization Tips

1Use a single map to store all media query strings in Sass.

2Avoid repeating the same media query multiple times in your CSS.

3Keep media queries organized to reduce CSS file size and speed up style calculation.

Performance Quiz - 3 Questions

What is a main performance benefit of using a centralized media query map in Sass mixins?

A Increases the number of media queries

B Reduces duplicated CSS and file size

C Adds more DOM elements

D Blocks JavaScript execution

DevTools: Performance

How to check: Record a page load and look at the 'Style Recalculation' and 'Layout' events to see if multiple reflows occur due to CSS.

What to look for: Fewer style recalculation events and shorter layout times indicate better media query usage.