Design Technologist · AI-Assisted CSS Engineering
This showcase documents the complete assignment from raw semantic HTML through prompt engineering, human auditing, and a verified flight booking card that avoids specificity wars.
Large stylesheets need predictable precedence, clean component scope, and overrides that do not depend on selector escalation.
A global button rule and a card-specific button rule can collide when both buttons share
the same generic .btn class. Without an architecture, developers often reach for
longer selectors, IDs, or !important just to make the component win.
Cascade Layers define which category of styles wins, while native CSS Nesting keeps the
flight card’s sub-elements visually and mechanically connected to the .booking-card
wrapper. The AI drafts the CSS, but a human audit confirms that no unlayered overrides or
flat repeated selectors slipped in.
!important
Unlayered overrides
Flat repeated selectors
Leaky component styles
Six coordinated ideas turn one shared button class into predictable global and component behavior.
Layer order decides whether reset, base, or component rules win before selector escalation becomes tempting.
The component button can win through the cascade architecture rather than through IDs or heavier selectors.
Sub-element rules stay inside the parent component block without requiring Sass or a build step.
The & selector makes hover, active, focus, and descendant rules explicitly relative to the card.
Component and BEM-style class names describe the card structure while keeping global button styles reusable.
The reset layer keeps padding and borders predictable before the base and component layers take over.
The structure already separates global content from the flight component, but the browser has not been given scoping or layer rules yet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Week 05 Lab: Nesting & Cascade Layers</title>
</head>
<body>
<!-- Global Header (Represents base/layout styles) -->
<header class="global-header">
<h1 class="global-title">Global Style Base</h1>
<p>This button uses global base styles:</p>
<button class="btn">Global Action Button</button>
</header>
<hr class="divider">
<!-- Isolated Component Section (Represents scoped component styles) -->
<main class="component-sandbox">
<!-- Isolated Flight Booking Component Card -->
<article class="booking-card">
<header class="booking-card__header">
<h3 class="booking-card__title">Flight Overview</h3>
<span class="booking-card__badge">Confirmed</span>
</header>
<div class="booking-card__route">
<div class="route-node">
<span class="route-node__code">SEA</span>
<span class="route-node__time">10:15 AM</span>
</div>
<div class="route-connector">
<span class="connector-line"></span>
<span class="connector-duration">4h 20m (Direct)</span>
</div>
<div class="route-node">
<span class="route-node__code">LAX</span>
<span class="route-node__time">02:35 PM</span>
</div>
</div>
<footer class="booking-card__footer">
<!-- Notice this button has the exact same generic ".btn" class as the header button! -->
<button class="btn">Manage Booking</button>
</footer>
</article>
</main>
</body>
</html>Browser defaults only
This button uses global base styles:
SEA · 10:15 AM
4h 20m (Direct)
LAX · 02:35 PM
The prompt defines where every category of CSS belongs before the model writes a single selector.
Preserve the supplied semantic HTML and the shared .btn class on both buttons.
Require @layer reset, base, components; as the first CSS architecture rule.
Place reset, global base styles, and component styles into their own named layers.
Keep flight-card sub-elements nested inside .booking-card with the & selector.
Reject IDs, unlayered overrides, preprocessors, and !important as override strategies.
Require button override, code audit, layer precedence, focus, zoom, theme, and overflow checks.
Act as a senior CSS systems engineer. Generate a production-ready stylesheet for the supplied semantic flight-booking HTML without replacing its structural class system.
Architecture requirements:
1. Declare the cascade layer order at the very top of the stylesheet with @layer reset, base, components; exactly in that order.
2. Put only box sizing and basic margin cleanup in the reset layer. Use box-sizing: border-box for all elements and pseudo-elements.
3. Put page-level typography, global headings, the global header, default document spacing, and the generic .btn button style in the base layer.
4. Put every .booking-card rule and every flight-card sub-element rule in the components layer so component styles outrank base styles through layer order instead of specificity escalation.
5. Use native CSS Nesting inside the .booking-card wrapper. Nest sub-elements such as .booking-card__title, .booking-card__badge, .booking-card__route, .route-node, .connector-line, .connector-duration, and the card-scoped .btn directly inside .booking-card.
6. Use the & nesting selector for hover, active, focus-within, and card-scoped descendant rules. Do not write flat repeated selectors such as .booking-card .booking-card__title.
7. Preserve the fact that both buttons share the generic .btn class. The header button must keep the base .btn styling while the Manage Booking button receives the card-scoped component styling.
8. Do not use ID selectors, inline styles, unlayered overrides, preprocessors, JavaScript, frameworks, or !important.
9. Keep the component responsive with flexible route spacing, wrapping behavior, logical sizing, readable contrast, visible keyboard focus, and usable button target sizes.
10. Add concise comments only where they clarify the layer architecture, nesting scope, or specificity override test.
Return only the complete CSS stylesheet.The draft only becomes trustworthy after selector structure, layer precedence, and button behavior are inspected.
@layer reset, base, components;
@layer base {
.btn {
background: var(--global-action-bg);
color: var(--global-action-text);
}
}
@layer components {
.booking-card {
& .booking-card__title {
color: var(--card-heading);
}
& .booking-card__badge {
background: var(--badge-bg);
color: var(--badge-text);
}
& .btn {
background: var(--card-action-bg);
color: var(--card-action-text);
}
}
}/* Avoid: escalating specificity or emergency overrides */
.booking-card .booking-card__footer .btn {
background: royalblue !important;
}
/* Prefer: layer order plus scoped nesting */
@layer reset, base, components;
@layer base {
.btn { background: slategray; }
}
@layer components {
.booking-card {
& .btn { background: royalblue; }
}
}The generated CSS starts with @layer reset, base, components; to make precedence explicit.
Box sizing and basic margin cleanup stay in the reset layer instead of leaking into component styling.
Global typography, the global header, and the default .btn behavior remain reusable.
The card-scoped .btn wins because the components layer comes after the base layer.
Flight-card child rules are nested inside .booking-card rather than repeated as manual descendant selectors.
!importantThe override strategy uses layer order and scope, not emergency declarations.
The standalone generated CSS keeps assignment rules inside named layers so unlayered declarations do not unexpectedly win.
Hover, active, and focus-within states are nested with & and remain keyboard visible.
Both buttons still use .btn, but layer order and card scope make their final appearances intentionally different.
This button uses global base styles:
The global and card buttons both keep .btn, proving the architecture works without renaming.
reset, base, and components communicate precedence before specificity is calculated.
Nested card rules keep title, badge, route, connector, footer, and button styling near the parent card.
The final component is accepted only after the layer order and nested selectors survive direct inspection.
@layer reset, base, components;..btn rules live in the base layer..booking-card rule and sub-element rule lives in the components layer..booking-card .booking-card__title..booking-card with the & operator..btn class.!important.AI drafted the layered CSS. Human auditing verified scoping, precedence, accessibility, and standards compliance.