Define --space as 16px on #wrap and pad with it.
Acceptance criteria
- 1.Define --space as 16px on #wrap and pad with it.
CSS Tutorial · CSS Output & Performance
These 10 tasks go with the CSS Architecture chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Organize tokens, base rules, components, utilities, and exceptions so a stylesheet remains easy to change. The chapter organizes tokens, base rules, components, utilities, variants, layers, selector weight, and the maintenance of exceptions.” .
1.Centralise a tokenexercise · easy · 10 min
Define --space as 16px on #wrap and pad with it.
Passes when: Define --space as 16px on #wrap and pad with it.
2.Provide a fallbackexercise · easy · 10 min · practice plan
Pad #wrap with --space, falling back to 12px when it is undefined.
Passes when: Pad #wrap with --space, falling back to 12px when it is undefined.
3.Structure with layersexercise · easy · 10 min · practice plan
A reset layer and a components layer; components should win.
Passes when: A reset layer and a components layer; components should win.
4.Keep specificity flatexercise · easy · 10 min · practice plan
Style the .lead class rather than reaching for the id.
Passes when: Style the .lead class rather than reaching for the id.
5.Compose tokens and layersexercise · medium · 10 min · practice plan
Tokens on the wrapper, components layer using them.
Passes when: Tokens on the wrapper, components layer using them.
6.Fix the hard-coded valuebug fix · easy · 8 min
The padding should come from the token, not a repeated literal.
Passes when: The padding should come from the token, not a repeated literal.
7.Fix the fallback separatorbug fix · easy · 8 min · practice plan
A var() fallback follows a comma.
Passes when: A var() fallback follows a comma.
8.Fix the layer orderbug fix · easy · 8 min · practice plan
components must come after reset to win.
Passes when: components must come after reset to win.
9.Fix the over-specific selectorbug fix · easy · 8 min · practice plan
A long id chain is harder to override than a class.
Passes when: A long id chain is harder to override than a class.
10.Fix the token out of scopebug fix · easy · 8 min · practice plan
The tokens must sit on an ancestor of the element using them.
Passes when: The tokens must sit on an ancestor of the element using them.
Between them these tasks cover Design tokens, Layered structure and Keeping specificity flat.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.