Critical CSS extraction strategies in SASS - Mini Project: Build & Apply

Critical CSS Extraction Strategies with Sass

📖 Scenario: You are working on a website that needs to load faster by showing important styles first. To do this, you will separate the critical CSS (styles needed for above-the-fold content) from the rest of the styles. You will use Sass to organize and extract these critical styles efficiently.

🎯 Goal: Build a Sass setup that separates critical CSS styles from non-critical styles using variables and partials. You will create a small critical styles map, configure a breakpoint variable, write a loop to generate critical styles, and finally import the critical styles into the main stylesheet.

📋 What You'll Learn

Create a Sass map called $critical-styles with specific selectors and their critical properties.

Add a breakpoint variable $breakpoint to control responsive styles.

Use a @each loop to generate critical CSS rules from the map.

Import the critical styles partial into the main stylesheet.

💡 Why This Matters

🌍 Real World

Separating critical CSS helps websites load faster by showing important styles immediately, improving user experience especially on slow connections.

💼 Career

Front-end developers often optimize CSS delivery using techniques like critical CSS extraction to improve website performance and SEO.

1

Create the critical styles map

Create a Sass map called $critical-styles with these exact entries: '.header': ( 'background-color': #fff, 'color': #333 ), '.nav': ( 'display': flex, 'justify-content': space-between ), and '.button-primary': ( 'background-color': #007bff, 'color': #fff ).

SASS

# Your code here

Need a hint?

Use a Sass map with selectors as keys and property maps as values.

2

Add a breakpoint variable

Add a Sass variable called $breakpoint and set it to 48rem to use for responsive design.

SASS

$critical-styles: (
  '.header': (
    'background-color': #fff,
    'color': #333
  ),
  '.nav': (
    'display': flex,
    'justify-content': space-between
  ),
  '.button-primary': (
    'background-color': #007bff,
    'color': #fff
  )
);

// Your code here

Need a hint?

Define a variable with $breakpoint: 48rem;.

3

Generate critical CSS rules with a loop

Use a @each loop with variables $selector and $props to iterate over $critical-styles. Inside the loop, write a CSS rule for #{$selector} and use another @each loop with $prop and $value to set each property and value from $props.

SASS

$critical-styles: (
  '.header': (
    'background-color': #fff,
    'color': #333
  ),
  '.nav': (
    'display': flex,
    'justify-content': space-between
  ),
  '.button-primary': (
    'background-color': #007bff,
    'color': #fff
  )
);

$breakpoint: 48rem;

// Your code here

Need a hint?

Use nested @each loops to generate CSS rules from the map.

4

Import critical styles partial

Add an @import statement to import the partial file '_critical.scss' into your main stylesheet.

SASS

$critical-styles: (
  '.header': (
    'background-color': #fff,
    'color': #333
  ),
  '.nav': (
    'display': flex,
    'justify-content': space-between
  ),
  '.button-primary': (
    'background-color': #007bff,
    'color': #fff
  )
);

$breakpoint: 48rem;

@each $selector, $props in $critical-styles {
  #{$selector} {
    @each $prop, $value in $props {
      #{$prop}: #{$value};
    }
  }
}

// Your code here

Need a hint?

Use @import 'critical'; to include the critical styles partial.