Critical CSS extraction strategies in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable for the primary color in SASS.

SASS

$primary-color: [1];

Drag options to blanks, or click blank then click option'

Acolor-primary

Bprimary-color

Cred

D#ff6347

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of color values.

Forgetting the '#' in hex color codes.

In SASS, colors are usually defined using hex codes like '#ff6347' for tomato red.

2fill in blank

medium

Complete the mixin to extract critical CSS by limiting styles to above-the-fold content.

SASS

@mixin critical [1] {
  overflow: hidden;
  max-height: 600px;
}

Drag options to blanks, or click blank then click option'

Acritical

BaboveFold

Cabove_fold

DcriticalCSS

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase instead of simple names.

Using underscores which are less common in SASS mixin names.

Mixin names should be descriptive and 'critical' clearly indicates styles for critical CSS.

3fill in blank

hard

Fix the error in the nested selector to apply styles only to critical elements.

SASS

.critical-container {
  [1] {
    display: block;
  }
}

Drag options to blanks, or click blank then click option'

A& .critical-content

B.critical-content

C> .critical-content

D& > .critical-content

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting '&' causing invalid nesting.

Using '>' without '&' which is invalid in SASS nesting.

Using '& .critical-content' correctly nests the selector inside '.critical-container' targeting its child.

4fill in blank

hard

Fill both blanks to create a map of critical CSS selectors and their max heights.

SASS

$critical-map: (
  [1]: 600px,
  [2]: 400px
);

Drag options to blanks, or click blank then click option'

A.header

B.footer

C.hero

D.sidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing footer or sidebar which are usually below the fold.

Using invalid selector names.

'.header' and '.hero' are common critical areas above the fold needing height limits.

5fill in blank

hard

Fill all three blanks to write a function that returns critical CSS selectors with height limits above a threshold.

SASS

@function get-critical-selectors($map, $threshold) {
  @return map-filter($map, ($key, $value) => $value [1] $threshold);
}

$filtered: get-critical-selectors($critical-map, [2]);

@include critical {
  max-height: [3];
}

Drag options to blanks, or click blank then click option'

A>

B500px

C600px

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' causing wrong filtering.

Mixing up threshold and max-height values.

The function filters selectors with height greater than threshold 500px, then applies max-height 600px.

Practice

1. What is the main goal of Critical CSS extraction in web development?

easy

A. To load only the CSS needed for above-the-fold content first

B. To combine all CSS files into one large file

C. To remove all CSS comments for smaller file size

D. To delay loading CSS until user interaction

Solution

1. Step 1: Understand the purpose of critical CSS

   Critical CSS focuses on styles needed to display the visible part of the page immediately.

2. Step 2: Identify the correct goal

   Loading only above-the-fold CSS first speeds up page rendering and improves user experience.

3. Final Answer:

   To load only the CSS needed for above-the-fold content first -> Option A

4. Quick Check:

   Critical CSS = Above-the-fold styles first [OK]

Hint: Critical CSS means styles for visible content load first [OK]

Common Mistakes:

• Thinking critical CSS means all CSS combined
• Believing critical CSS removes comments only
• Assuming CSS loads only after user clicks

2. Which SASS feature helps reuse styles when extracting critical CSS?

easy

A. Mixins

B. Variables

C. Nesting

D. Functions

Solution

1. Step 1: Review SASS features for reuse

   Mixins allow you to define reusable blocks of styles that can be included where needed.

2. Step 2: Match feature to critical CSS extraction

   Using mixins helps keep critical CSS organized and reusable across components.

3. Final Answer:

   Mixins -> Option A

4. Quick Check:

   Reusable style blocks = Mixins [OK]

Hint: Mixins reuse style blocks easily in SASS [OK]

Common Mistakes:

• Confusing variables with reusable style blocks
• Thinking nesting creates reusable styles
• Assuming functions output CSS directly

3. Given this SASS snippet for critical CSS extraction:

@mixin critical-button {
  background-color: blue;
  color: white;
  padding: 1rem;
}

.critical {
  @include critical-button;
  font-weight: bold;
}

What CSS will be generated for the .critical class?

medium

A. Error: mixin not found

B. .critical { background-color: blue; color: white; padding: 1rem; }

C. .critical { background-color: blue; color: white; padding: 1rem; font-weight: bold; }

D. .critical { font-weight: bold; }

Solution

1. Step 1: Understand mixin inclusion

   The @include critical-button inserts all styles from the mixin into .critical.

2. Step 2: Combine mixin styles with additional styles

   The .critical class gets background-color, color, padding from mixin plus font-weight: bold.

3. Final Answer:

   .critical { background-color: blue; color: white; padding: 1rem; font-weight: bold; } -> Option C

4. Quick Check:

   Mixin styles + extra styles = full CSS block [OK]

Hint: Mixins insert all their styles where included [OK]

Common Mistakes:

• Ignoring styles outside the mixin
• Thinking mixins create separate CSS blocks
• Assuming syntax error due to mixin

4. Identify the error in this SASS code for critical CSS extraction:

@mixin critical-text {
  font-size 1.2rem;
  color: black;
}

.text {
  @include critical-text;
}

medium

A. Cannot include mixins inside classes

B. Missing colon after font-size property

C. Mixin name is invalid

D. Color property value is incorrect

Solution

1. Step 1: Check property syntax inside mixin

   The line font-size 1.2rem; is missing a colon between property and value.

2. Step 2: Confirm correct SASS syntax

   All CSS properties require a colon, so this causes a syntax error.

3. Final Answer:

   Missing colon after font-size property -> Option B

4. Quick Check:

   Property syntax needs colon : [OK]

Hint: CSS properties always need a colon between name and value [OK]

Common Mistakes:

• Assuming mixin names must be special
• Thinking mixins can't be included in classes
• Believing color value 'black' is invalid

5. You want to extract critical CSS for a webpage header using SASS. Which strategy best improves page load speed?

hard

A. Load all styles in one CSS file at the end of the body

B. Place critical CSS in an external file loaded with normally

C. Use SASS variables only without mixins for critical styles

D. Inline critical header styles in the HTML <head> and load other styles asynchronously

Solution

1. Step 1: Understand critical CSS loading best practice

   Inlining critical CSS in the HTML <head> ensures styles are applied immediately during page load.

2. Step 2: Compare other options

   Loading all styles at the end delays rendering; variables alone don't extract CSS; normal external loading delays critical styles.

3. Final Answer:

   Inline critical header styles in the HTML <head> and load other styles asynchronously -> Option D

4. Quick Check:

   Inline critical CSS + async load = faster page [OK]

Hint: Inline critical CSS in head for fastest render [OK]

Common Mistakes:

• Loading all CSS at the end delays visible content
• Using variables alone doesn't extract critical CSS
• Loading critical CSS as normal external file delays render