Skip to main content

CSS Architecture — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Architecture lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Centralise a token

    easy10 min

    Define --space as 16px on #wrap and pad with it.

  2. 2

    Provide a fallback

    easy10 min

    Pad #wrap with --space, falling back to 12px when it is undefined.

  3. 3

    Structure with layers

    easy10 min

    A reset layer and a components layer; components should win.

  4. 4

    Keep specificity flat

    easy10 min

    Style the .lead class rather than reaching for the id.

  5. 5

    Compose tokens and layers

    medium10 min

    Tokens on the wrapper, components layer using them.

Find the bug(5)

  1. 1

    Fix the hard-coded value

    easy8 min

    The padding should come from the token, not a repeated literal.

  2. 2

    Fix the fallback separator

    easy8 min

    A var() fallback follows a comma.

  3. 3

    Fix the layer order

    easy8 min

    components must come after reset to win.

  4. 4

    Fix the over-specific selector

    easy8 min

    A long id chain is harder to override than a class.

  5. 5

    Fix the token out of scope

    easy8 min

    The tokens must sit on an ancestor of the element using them.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace