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.