Repaint Optimization — Complete Guide
Repaint Optimization — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of CSS Tutorial on Toolliyo Academy.
On this page
CSS Tutorial · Lesson 67 of 100
Repaint Optimization
Foundations & Layout ✓ → Responsive & Motion ✓ → Architecture & Perf → Projects
Architecture & Perf · 3 — Scale · ~15 min read · CSS — Accessibility & Performance
1. Introduction
Level up: Repaint Optimization. Think architecture, performance, and maintainable design systems.
Repaint redraws pixels without layout change — color, box-shadow, visibility. Composite-only properties (transform, opacity) skip repaint on isolated layers.
2. Real-world story
200 product cards hover smoothly on Flipkart-style listing.
Outcome: translateY hover passes 60fps paint profile on mid-tier laptop.
3. Why it matters
StyleVerse hover effects on dense product grids repaint hundreds of cards — optimize to compositor-friendly properties.
4. Visual understanding
Read this diagram — the mental model for Repaint Optimization.
HTML parse → CSSOM → Render tree → Layout → Paint → Composite Critical CSS = above-the-fold fast Avoid layout thrash; prefer transform/opacity anims
5. Key concepts (easy words)
| Idea | Meaning |
|---|---|
| What | Repaint redraws pixels without layout change — color, box-shadow, visibility. Composite-only properties (transform, opacity) skip repaint on isolated layers. |
| Remember | Repaint affects pixels not layout. transform and opacity cheaper than shadow and color on large areas. DevTools paint flashing finds hotspots. |
| Practice tip | Change one property, refresh, watch DevTools Computed. |
6. How it works
- Hover lifts card with transform instead of margin. box-shadow repaints but limited area. ::after overlay fades opacity for badge highlight.
- Repaint affects pixels not layout.
- transform and opacity cheaper than shadow and color on large areas.
- Check the result in DevTools → Computed and the box model overlay.
7. Choose wisely
| Option | Notes |
|---|---|
| Do | Practice Repaint Optimization on a small StyleVerse card |
| Avoid | Copying huge frameworks before learning core CSS |
8. Try this example
Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.
.product-card {
transition: transform 0.2s, box-shadow 0.2s;
will-change: auto;
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.product-card::after {
opacity: 0;
transition: opacity 0.2s;
}Line walkthrough
| Code | What it means |
|---|---|
.product-card { | Selector — picks which elements get these declarations. |
transition: transform 0.2s, box-shadow 0.2s; | Declaration — property and value that change appearance. |
will-change: auto; | Declaration — property and value that change appearance. |
} | Ends the rule block. |
.product-card:hover { | Selector — picks which elements get these declarations. |
transform: translateY(-2px); | Declaration — property and value that change appearance. |
box-shadow: 0 8px 20px rgba(0,0,0,0.1); | Declaration — property and value that change appearance. |
} | Ends the rule block. |
.product-card::after { | Selector — picks which elements get these declarations. |
opacity: 0; | Declaration — property and value that change appearance. |
Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
9. Another real-world angle
10. Best practices checklist
- Prefer classes over ids for reusable StyleVerse components.
- Use design tokens (CSS variables) for color and spacing.
- Mobile-first media queries; test keyboard focus.
- Keep specificity low — avoid !important except rare overrides.
- Animate transform/opacity when you can; respect prefers-reduced-motion.
11. Common mistakes
- box-shadow on huge fixed fullscreen overlay animating every frame.
- filter: blur animating on scroll — expensive paint.
12. Practice in the browser
- Enable Paint flashing in DevTools Rendering tab.
- Hover grid — minimize green flash area.
- Prefer opacity fade over background-color on large elements.
- Remove box-shadow transition on mobile if janky.
Experiments
- Replace box-shadow hover with border-color change on mobile.
- Use opacity overlay instead of background-color fade on hero.
13. FAQ
Where should I put CSS for Repaint Optimization?
Start in a <style> block or styles.css linked from HTML. Later use CSS Modules, Tailwind, or tokens in a design system.
Why is my rule not applying?
Check selector match, typos, specificity, and whether a more specific rule or inline style wins. DevTools Computed tells the truth.
Flexbox or Grid for this?
Flex for one direction (toolbars, card rows). Grid for two-dimensional page frames. Many UIs use both.
14. Interview questions
Explain Repaint Optimization simply.
Repaint redraws pixels without layout change — color, box-shadow, visibility. Composite-only properties (transform, opacity) skip repaint on isolated layers.
How do you debug CSS?
Inspect element, toggle declarations, read Computed styles, outline the box model, and reduce specificity conflicts.
How does this show up in production UI?
translateY hover passes 60fps paint profile on mid-tier laptop.
15. Remember
- Repaint affects pixels not layout.
- transform and opacity cheaper than shadow and color on large areas.
- DevTools paint flashing finds hotspots.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
