Placeholder selectors with % in SASS - Performance & Optimization

Performance: Placeholder selectors with %

MEDIUM IMPACT

This affects CSS bundle size and rendering speed by reducing duplicated styles and minimizing CSS rules sent to the browser.

Reusing common styles across multiple selectors

SASS

%common-style { color: red; font-weight: bold; }
.button { @extend %common-style; }
.alert { @extend %common-style; }

Reuses styles via placeholder selectors, generating only one set of CSS rules.

📈 Performance GainReduces CSS file size, improving load speed and parsing efficiency.

Reusing common styles across multiple selectors

SASS

.button { color: red; font-weight: bold; }
.alert { color: red; font-weight: bold; }

Repeating the same styles in multiple selectors increases CSS file size and parsing time.

📉 Performance CostAdds unnecessary CSS bytes, increasing download and parse time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeating styles in multiple selectors	N/A	0	Low	[X] Bad
Using % placeholder selectors with @extend	N/A	0	Low	[OK] Good

Rendering Pipeline

Placeholder selectors are processed at build time by Sass, producing optimized CSS with fewer duplicated rules. This reduces CSS file size and parsing work in the browser.

→CSS Parsing

→Style Calculation

⚠️ BottleneckCSS Parsing due to large file size

Core Web Vital Affected

LCP

This affects CSS bundle size and rendering speed by reducing duplicated styles and minimizing CSS rules sent to the browser.

Optimization Tips

1Use % placeholders to share common styles and avoid duplication.

2Avoid repeating identical CSS rules across selectors to keep CSS small.

3Smaller CSS files load and parse faster, improving page load speed.

Performance Quiz - 3 Questions

What is the main performance benefit of using Sass placeholder selectors (%)?

A They speed up JavaScript execution.

B They reduce CSS file size by avoiding duplicated styles.

C They improve image loading times.

D They reduce HTML file size.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and inspect CSS file size and load time.

What to look for: Smaller CSS file size and faster CSS load time indicate good use of placeholder selectors.

Practice

1. What is the main purpose of a placeholder selector in Sass, which starts with %?

easy

A. To hold reusable styles that can be extended by other selectors

B. To create a new HTML element

C. To define a variable for colors

D. To write comments in Sass code

Solution

1. Step 1: Understand what placeholder selectors do

   Placeholder selectors start with % and are used to hold styles that are not output directly but can be reused.

2. Step 2: Identify their usage

   They are extended by other selectors using @extend to apply the stored styles without duplicating CSS.

3. Final Answer:

   To hold reusable styles that can be extended by other selectors -> Option A

4. Quick Check:

   Placeholder selectors = reusable styles [OK]

Hint: Remember % means reusable style block [OK]

Common Mistakes:

• Thinking % creates HTML elements
• Confusing % with variables
• Using % for comments

2. Which of the following is the correct syntax to extend a placeholder selector named %button-style inside a Sass rule?

easy

A. button { @include %button-style; }

B. button { extend %button-style; }

C. button { @extend %button-style; }

D. button { %button-style; }

Solution

1. Step 1: Recall the syntax for extending placeholders

   In Sass, to apply styles from a placeholder, you use @extend %placeholder-name; inside a selector.

2. Step 2: Check each option

   button { @extend %button-style; } uses @extend %button-style; correctly. The other options use incorrect keywords or syntax.

3. Final Answer:

   button { @extend %button-style; } -> Option C

4. Quick Check:

   @extend %placeholder-name; = correct syntax [OK]

Hint: Use @extend with % to reuse styles [OK]

Common Mistakes:

• Using @include instead of @extend
• Omitting the @ symbol
• Writing %button-style without @extend

3. Given the Sass code:

%alert { color: red; font-weight: bold; }
.warning { @extend %alert; background: yellow; }

What CSS will be generated?

medium

A. %alert { color: red; font-weight: bold; }
.warning { background: yellow; }

B. .alert, .warning { color: red; font-weight: bold; background: yellow; }

C. .warning { background: yellow; }
%alert { color: red; font-weight: bold; }

D. .warning { color: red; font-weight: bold; background: yellow; }

Solution

1. Step 1: Understand placeholder output

   Placeholder selectors do not output CSS themselves. Their styles are included only when extended.

2. Step 2: Analyze the @extend usage

   The .warning class extends %alert, so it gets the styles from %alert plus its own background style.

3. Final Answer:

   .warning { color: red; font-weight: bold; background: yellow; } -> Option D

4. Quick Check:

   Placeholder styles appear only in extended selectors [OK]

Hint: Placeholder styles appear only when extended [OK]

Common Mistakes:

• Expecting %alert to appear in CSS
• Thinking styles duplicate without extend
• Confusing @extend with @include

4. Identify the error in this Sass code:

%card-style {
  border: 1px solid black;
}
.card {
  extend %card-style;
  padding: 1rem;
}

medium

A. Padding property is not allowed here

B. Missing @ symbol before extend

C. Placeholder selector name is invalid

D. Border property should be inside .card, not %card-style

Solution

1. Step 1: Check the syntax of @extend

   The correct syntax requires the @ symbol before extend to work properly.

2. Step 2: Identify the error in the code

   The code uses extend %card-style; without @, causing a syntax error.

3. Final Answer:

   Missing @ symbol before extend -> Option B

4. Quick Check:

   @extend must have @ symbol [OK]

Hint: Always use @ before extend keyword [OK]

Common Mistakes:

• Omitting @ before extend
• Misnaming placeholder selectors
• Misplacing properties inside placeholders

5. You want to create two button styles, .primary-btn and .secondary-btn, sharing common styles but with different colors. Which Sass code correctly uses placeholder selectors to avoid repeating common styles?

hard

A. %btn-common {
padding: 1rem;
border-radius: 0.5rem;
}
.primary-btn {
@extend %btn-common;
background-color: blue;
color: white;
}
.secondary-btn {
@extend %btn-common;
background-color: gray;
color: black;
}

B. .btn-common {
padding: 1rem;
border-radius: 0.5rem;
}
.primary-btn {
@extend .btn-common;
background-color: blue;
color: white;
}
.secondary-btn {
@extend .btn-common;
background-color: gray;
color: black;
}

C. %btn-common {
padding: 1rem;
border-radius: 0.5rem;
background-color: blue;
}
.primary-btn {
@extend %btn-common;
color: white;
}
.secondary-btn {
@extend %btn-common;
background-color: gray;
color: black;
}

D. %btn-common {
padding: 1rem;
border-radius: 0.5rem;
}
.primary-btn {
background-color: blue;
color: white;
}
.secondary-btn {
background-color: gray;
color: black;
}

Solution

1. Step 1: Identify the correct use of placeholder selectors

   Placeholder selectors start with % and hold common styles to be extended by other selectors.

2. Step 2: Check each option for correct reuse and color overrides

   %btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
   }
   .primary-btn {
     @extend %btn-common;
     background-color: blue;
     color: white;
   }
   .secondary-btn {
     @extend %btn-common;
     background-color: gray;
     color: black;
   }

   correctly defines %btn-common with shared styles and extends it in both buttons, adding different colors separately.

   .btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
   }
   .primary-btn {
     @extend .btn-common;
     background-color: blue;
     color: white;
   }
   .secondary-btn {
     @extend .btn-common;
     background-color: gray;
     color: black;
   }

   incorrectly uses a class instead of a placeholder.

   %btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
     background-color: blue;
   }
   .primary-btn {
     @extend %btn-common;
     color: white;
   }
   .secondary-btn {
     @extend %btn-common;
     background-color: gray;
     color: black;
   }

   mixes shared and specific colors in the placeholder, causing unwanted style inheritance.

   %btn-common {
     padding: 1rem;
     border-radius: 0.5rem;
   }
   .primary-btn {
     background-color: blue;
     color: white;
   }
   .secondary-btn {
     background-color: gray;
     color: black;
   }

   does not use placeholders at all, repeating styles.

3. Final Answer:

   %btn-common placeholder with @extend usage in both buttons -> Option A

4. Quick Check:

   Use %placeholder for shared styles, extend and override colors [OK]

Hint: Put shared styles in %placeholder, extend, then add unique styles [OK]

Common Mistakes:

• Using classes instead of placeholders for shared styles
• Putting unique styles inside the placeholder
• Not using @extend to reuse styles