Lesson 7 of 8
One CSS class
- 13 min
- 5 checks
- 3 hints
- Go to task
Goal
One change instead of a hundred and fifty
Explanation
If you restyle fifty cards with card.style inside a loop, you're making a hundred and fifty changes on every click, and you leave an inline style on every card that your CSS rules can only override with !important.
Adding a single class to the container does the same job with one change. The browser recalculates styles once, and the look stays in your CSS, where transitions, media queries and dark mode can work with it.
A common mistake is mixing reads and writes inside a loop. Reading offsetHeight after every change forces the browser to recalculate the layout right away on every pass. The right way is to read everything you need first and then make all the changes, or to write just once, as in this lesson.
Your task
Move the styles into a #list.compact .card rule, then make the #compact button toggle the compact class on #list alone, without touching the cards, and keep aria-pressed up to date.
Checks
5 checks- A click changes only the list, not the cards
- Each click adds or removes the compact class on the list
- The class shrinks the cards' padding through CSS
- The cards have no inline styles
- aria-pressed follows the state