Skip to Content
HTML and CSS Advanced: Styles That Hold Up in Production
Advanced
0 likes
Courses
HTML and CSS Advanced: Styles That Hold Up in Production

Check Yourself: Ship and Maintain

Five scenario questions on tokens, theming, redesign-proof CSS and audits. If you miss more than one, reread the lesson that covers it.

5 min HTML and CSSWeb DevelopmentTesting and DebuggingPerformance Optimization Advanced
Prev Next
Fullscreen Share
Course content

Sign in to save your progress.

Course Home
1. Your components use --blue-600 directly. The brand colour changes to green. What went wrong in the token design?
Components should hard-code the colour so nothing can break them. The tokens should have been written in Sass. Primitives should not exist. Components referenced a primitive instead of a semantic token like --accent.
2. A dark theme is built with color-scheme: light dark and light-dark() tokens. A visitor clicks a toggle that sets data-theme="dark". What makes the toggle win over the OS setting?
localStorage changes the colours directly. The prefers-color-scheme media query has a higher priority. A rule :root[data-theme="dark"] { color-scheme: dark; } forces the dark scheme. The browser always prefers the last click.
3. A multi-brand site defines --brand-hover: color-mix(in srgb, var(--brand) 85%, black) only on :root. The harbor brand sets its own --brand on a [data-brand] element, but the hover colour stays blue. Why?
[data-brand] cannot override variables from :root. The hover token was computed on :root from the default brand and inherited as a finished value. color-mix() does not accept custom properties. Hover colours cannot be tokens.
4. A redesign breaks a rule written as .sidebar > div:nth-child(2) > p { color: red } after a developer wraps the paragraph in one more div. What is the lasting fix?
Add another div to the selector. Stop adding wrappers. Style the paragraph with a class that describes it, like .price-note. Use !important.
5. An axe-core run on a page reports no violations. A keyboard user still cannot see which control has focus. What explains it?
axe only checks buttons. axe was run at the wrong width. Automated tools cannot judge whether a focus indicator is visible, so a manual Tab-through is still needed. Focus rings are optional in WCAG.

About

Five scenario questions on tokens, theming, redesign-proof CSS and audits. If you miss more than one, reread the lesson that covers it.

Duration
5 min
Last update
08/05/2026
Was this helpful?
​ 0 ​ 0

Comments (0)

Sign in to comment

No comments yet.