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: Architecture That Scales

Five scenario questions on layers, specificity and when to skip a framework. 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. A vendor stylesheet uses #page .toolbar a.btn.btn-primary, and your new .btn rule loses to it. You cannot edit the vendor file. What is the cleanest fix with cascade layers?
Put an ID selector on your rule so it matches the vendor's weight. Copy the vendor file into your project and delete its selectors. Import the vendor file into an earlier layer and put your rule in a later layer. Add !important to your rule.
2. You wrap reset.css in @layer reset but leave the rest of the site's CSS unlayered. A reset rule now loses to every site rule, even a weak one. What did you forget?
That layers only work inside media queries. That the reset layer must be named base. Unlayered styles beat every layer, so the site rules win over anything in a layer. That layers are ignored in Chrome.
3. Two !important declarations compete: one in the base layer, one in the later utilities layer. Which wins?
The one in utilities, because it is later. Whichever has the higher specificity. The one in base, because important declarations reverse the layer order.
4. Which choice fits a project that needs a reset, a spacing scale and a responsive grid and has no design team?
Write a small base stylesheet with custom properties, :where(), grid and gap, and add components as needed. Use inline styles so nothing can conflict. Ship a full framework and override half of it. Copy the layout from another site and edit later.
5. You put :where(h1, h2, h3) { margin: 0 } in your base styles. Later, .page-title { margin: 1rem 0 } does not apply. What is the most likely cause?
Something else is overriding it, such as a later rule or an unlayered rule, since :where() itself cannot win. :where() has very high specificity. Class selectors do not work with heading elements. .page-title must be wrapped in :is().

About

Five scenario questions on layers, specificity and when to skip a framework. If you miss more than one, reread the lesson that covers it.

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

Comments (0)

Sign in to comment

No comments yet.