State class generation (hover, active, disabled) in SASS - Performance & Optimization

Performance: State class generation (hover, active, disabled)

MEDIUM IMPACT

This affects the browser's style calculation and paint phases by adding or removing CSS classes that change element states like hover, active, or disabled.

Applying hover, active, and disabled styles to buttons

SASS

@mixin button-states-good {
  button {
    &.hover {
      background-color: blue;
    }
    &.active {
      background-color: darkblue;
    }
    &.disabled {
      background-color: gray;
      cursor: not-allowed;
    }
  }
}
@include button-states-good;

// JavaScript toggles classes on events instead of relying on :hover/:active pseudo-classes

Using explicit state classes reduces browser style recalculations by controlling state changes via class toggling, which is more performant especially for complex UI.

📈 Performance GainReduces style recalculations and repaints to only when classes change, improving interaction responsiveness.

Applying hover, active, and disabled styles to buttons

SASS

@mixin button-states-bad {
  button {
    &:hover {
      background-color: blue;
    }
    &:active {
      background-color: darkblue;
    }
    &:disabled {
      background-color: gray;
      cursor: not-allowed;
    }
  }
}
@include button-states-bad;

Using nested pseudo-classes directly on many buttons causes the browser to recalculate styles on every hover or active event, triggering style recalculations and repaints.

📉 Performance CostTriggers style recalculations and repaints on each hover and active interaction.

Performance Comparison

Pattern	DOM Operations	Style Recalc	Paint Cost	Verdict
Using :hover/:active/:disabled pseudo-classes	No extra DOM ops	Triggers style recalc and repaint on every hover/active	High paint cost on interaction	[X] Bad
Using explicit .hover/.active/.disabled classes toggled by JS	Class toggling on state change	Single style recalc per class toggle	Lower paint cost, batched updates	[OK] Good

Rendering Pipeline

State class generation affects the Style Calculation and Paint stages because changing classes triggers style recalculation and repaint of affected elements.

→Style Calculation

→Paint

⚠️ BottleneckStyle Calculation is most expensive due to recalculating styles on state changes.

Core Web Vital Affected

INP

This affects the browser's style calculation and paint phases by adding or removing CSS classes that change element states like hover, active, or disabled.

Optimization Tips

1Avoid relying solely on :hover and :active pseudo-classes for complex interactive states.

2Use JavaScript to toggle explicit state classes to batch style changes.

3Minimize style recalculations by reducing frequent pseudo-class triggers.

Performance Quiz - 3 Questions

Which method reduces style recalculations when applying hover and active states?

A Using :hover and :active pseudo-classes in CSS

B Applying inline styles on hover events

C Using explicit state classes toggled by JavaScript

D Using !important in CSS rules

DevTools: Performance

How to check: Record a performance profile while interacting with buttons. Look for style recalculation and paint events during hover and active states.

What to look for: High frequency of style recalculations and paints indicates inefficient state styling; fewer recalculations with class toggling shows better performance.