CSS Optimization — Code Challenge

How it works

• CSS performance depends on the work a change triggers: style calculation, layout, paint, and compositing. Transform is often cheaper to animate than layout dimensions, but measure on real content.
• Inspect the computed value as well as the declaration. Relative lengths, inheritance, and the cascade may make the final result different from a first guess.
• Prefer a small, predictable rule set. Fix the reason a declaration loses before adding more selectors or importance flags.

Your task

Use the HTML below to explore this rule: CSS performance depends on the work a change triggers: style calculation, layout, paint, and compositing. Transform is often cheaper to animate than layout dimensions, but measure on real content. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.

.card { transition: transform 150ms ease; }
.card:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

A solution to compare

The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.

<article class="card"><span class="badge">This Saturday</span><h2>Neighbourhood repair club</h2><p>Bring a small project. Share a useful skill.</p><a href="#booking">View the workshop</a></article>

body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }

/* This lesson */
.card { transition: transform 150ms ease; }
.card:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

CSS performance depends on the work a change triggers: style calculation, layout, paint, and compositing. Transform is often cheaper to animate than layout dimensions, but measure on real content.