Grid column generator with loops in SASS - Performance & Optimization

Performance: Grid column generator with loops

MEDIUM IMPACT

This affects the CSS generation size and browser rendering performance by controlling how many grid column classes are created and used.

Creating reusable grid column classes for layout

SASS

@for $i from 1 through 12 {
  .col-#{$i} {
    grid-column: span #{$i};
  }
}

Limits generated classes to common grid columns, reducing CSS size and improving load speed.

📈 Performance GainSaves ~4-8kb CSS, reduces LCP by faster CSS parsing

Creating reusable grid column classes for layout

SASS

@for $i from 1 through 100 {
  .col-#{$i} {
    grid-column: span #{$i};
  }
}

Generates 100 CSS classes increasing CSS file size and parsing time, even if many are unused.

📉 Performance CostAdds ~5-10kb to CSS bundle, increases LCP due to larger CSS parsing

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Generating 100 grid column classes	No extra DOM nodes	No extra reflows	Higher paint cost due to larger CSS	[X] Bad
Generating 12 grid column classes	No extra DOM nodes	No extra reflows	Lower paint cost with smaller CSS	[OK] Good

Rendering Pipeline

The generated CSS classes are parsed during Style Calculation. More classes increase CSS parsing time and memory. During Layout, grid columns affect element sizing and positioning. Excessive classes increase CSS size but do not increase DOM nodes.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS size

Core Web Vital Affected

LCP

This affects the CSS generation size and browser rendering performance by controlling how many grid column classes are created and used.

Optimization Tips

1Limit loop ranges to only necessary grid columns to reduce CSS size.

2Avoid generating unused CSS classes to improve load speed.

3Smaller CSS files improve Largest Contentful Paint (LCP) by faster style calculation.

Performance Quiz - 3 Questions

What is the main performance cost of generating many grid column classes with a loop in Sass?

A More JavaScript execution time

B More DOM nodes created in the browser

C Increased CSS file size causing slower CSS parsing

D More HTTP requests for each class

DevTools: Performance

How to check: Record page load and look at the 'Style Recalculation' and 'CSS Parsing' times in the flame chart.

What to look for: Long CSS parsing or style recalculation times indicate large CSS impacting LCP.