Print stylesheet organization in SASS - Performance & Optimization

Performance: Print stylesheet organization

MEDIUM IMPACT

This affects page load speed and rendering performance when users print a page or use print preview.

Applying print styles in a way that impacts screen rendering performance

SASS

@import 'screen-styles';

// separate print stylesheet loaded only for print
/* <link rel="stylesheet" href="print.css" media="print"> */

Separates print styles into their own file loaded only when printing, reducing CSS parsing and render-blocking on screen.

📈 Performance GainNon-blocking for screen rendering; saves 10-20% CSS parsing time on page load

Applying print styles in a way that impacts screen rendering performance

SASS

@import 'print-styles';

// print styles included in main stylesheet
body {
  font-size: 1rem;
}
@media print {
  body {
    font-size: 0.8rem;
    color: black;
  }
}

Including print styles directly in the main stylesheet causes the browser to parse and apply them even when not printing, increasing CSS size and blocking rendering.

📉 Performance CostBlocks rendering for extra CSS parsing; increases CSS size by 10-20% unnecessarily

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Print styles inline in main CSS	No extra DOM nodes	Triggers 1 reflow on load	Increases paint cost due to larger CSS	[X] Bad
Separate print stylesheet with media="print"	No extra DOM nodes	No reflow on screen load	Paint cost only when printing	[OK] Good

Rendering Pipeline

When print styles are included inline or in the main CSS, the browser must parse and apply them during initial style calculation, increasing render-blocking time. Separating print styles delays their loading until print media is active, reducing initial style calculation and layout time.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to larger CSS and unnecessary parsing

Core Web Vital Affected

LCP

This affects page load speed and rendering performance when users print a page or use print preview.

Optimization Tips

1Keep print styles in a separate CSS file with media="print" attribute.

2Avoid mixing print styles with screen styles in the main stylesheet.

3Load print styles only when printing to reduce initial CSS parsing and render-blocking.

Performance Quiz - 3 Questions

What is the main performance benefit of using a separate print stylesheet with media="print"?

A It makes print styles load faster on screen.

B It delays loading and parsing print styles until printing, reducing initial render-blocking.

C It reduces the number of DOM nodes on the page.

D It improves JavaScript execution speed.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, filter by CSS files, check the Priority column for print stylesheet.

What to look for: Print stylesheet loads on initial page load with media="print" but Priority should be 'Low'; this confirms non-blocking behavior.

Practice

1. What is the main purpose of a print stylesheet in web development?

easy

A. To make the webpage look good when printed on paper

B. To add animations to the webpage

C. To improve website loading speed

D. To change the webpage's background color on screen

Solution

1. Step 1: Understand what print stylesheets do

   Print stylesheets adjust the webpage's appearance specifically for printing on paper.

2. Step 2: Compare options to the purpose

   Only To make the webpage look good when printed on paper matches the purpose of print stylesheets, which is to make pages look good on paper.

3. Final Answer:

   To make the webpage look good when printed on paper -> Option A

4. Quick Check:

   Print stylesheets = good print appearance [OK]

Hint: Print stylesheets improve printed page look, not screen effects [OK]

Common Mistakes:

• Confusing print stylesheets with screen stylesheets
• Thinking print stylesheets add animations
• Assuming print stylesheets speed up loading

2. Which of the following is the correct way to write a print media query in Sass?

easy

A. @media print { body { font-size: 12pt; } }

B. @media screen { body { color: black; } }

C. @media all { body { background: white; } }

D. @media handheld { body { font-weight: bold; } }

Solution

1. Step 1: Identify the print media query syntax

   The correct syntax for print styles is @media print { ... }.

2. Step 2: Match the option with print media query

   @media print { body { font-size: 12pt; } } uses @media print correctly with a style inside.

3. Final Answer:

   @media print { body { font-size: 12pt; } } -> Option A

4. Quick Check:

   Print media query syntax = @media print [OK]

Hint: Use '@media print' to target print styles in Sass [OK]

Common Mistakes:

• Using '@media screen' instead of '@media print'
• Forgetting curly braces after '@media print'
• Using unsupported media types like 'handheld'

3. Given this Sass code, what will be the font size of paragraphs when printed?

@media print {
  p {
    font-size: 14pt;
  }
}
p {
  font-size: 16px;
}

medium

A. 14px

B. 16px

C. 16pt

D. 14pt

Solution

1. Step 1: Understand media query effect on print

   The @media print block applies only when printing, overriding other styles.

2. Step 2: Compare font sizes inside and outside print query

   Outside print, paragraphs have 16px font size; inside print, 14pt is set, which applies when printing.

3. Final Answer:

   14pt -> Option D

4. Quick Check:

   Print font size = 14pt [OK]

Hint: Print styles override screen styles inside '@media print' [OK]

Common Mistakes:

• Confusing px and pt units
• Ignoring media query overrides
• Assuming screen styles apply when printing

4. Identify the error in this Sass print stylesheet code:

@media print {
  .hide-on-print {
    display: none
  }
}

medium

A. Cannot use 'display: none' in print styles

B. Wrong media type, should be '@media screen'

C. Missing semicolon after 'display: none'

D. Class selector should start with '#' instead of '.'

Solution

1. Step 1: Check CSS syntax inside '@media print'

   Every CSS property must end with a semicolon; here, 'display: none' misses it.

2. Step 2: Verify other options

   Media type '@media print' is correct, class selectors use '.', and 'display: none' is valid in print styles.

3. Final Answer:

   Missing semicolon after 'display: none' -> Option C

4. Quick Check:

   CSS properties need semicolons [OK]

Hint: Always end CSS declarations with semicolons [OK]

Common Mistakes:

• Omitting semicolons in CSS blocks
• Confusing class selectors with ID selectors
• Using wrong media types for print styles

5. You want to hide navigation menus and change font size only when printing. Which Sass structure correctly organizes these print styles?

hard

A. nav { display: none; }
body { font-size: 12pt; }

B. @media print {
nav { display: none; }
body { font-size: 12pt; }
}

C. @media screen {
nav { display: none; }
body { font-size: 12pt; }
}

D. @media print {
nav { font-size: 12pt; }
body { display: none; }
}

Solution

1. Step 1: Identify correct media query for print styles

   Print styles must be inside @media print { ... } to apply only when printing.

2. Step 2: Check style rules for hiding nav and changing font size

   @media print { nav { display: none; } body { font-size: 12pt; } } hides nav with display: none; and sets font size on body inside print media query, which is correct.

3. Final Answer:

   @media print { nav { display: none; } body { font-size: 12pt; } } -> Option B

4. Quick Check:

   Print styles inside '@media print' with correct selectors [OK]

Hint: Group all print styles inside '@media print' block [OK]

Common Mistakes:

• Placing print styles outside '@media print'
• Using '@media screen' instead of print
• Mixing display and font-size on wrong selectors