CSS, layout & accessibility

Train

CSS, layout & accessibility

Why senior frontend interviews still test CSS and accessibility, the 2026 platform baseline, and how the pages on the cascade and modern layout, CSS architecture with Tailwind v4, responsive design, WCAG 2.2 and accessible components in Vue fit together.
CSS reference (MDN)WCAG 2.2Web Platform Baseline

Frameworks did not remove CSS from the interview; they moved the questions up a level. Nobody asks you to centre a div. They ask how you structure styles for a component library, why a layout shifts, how you make a modal accessible, and what the European Accessibility Act means for the product. Accessibility in particular became a legal requirement for many EU services in June 2025, and interviewers now treat it as engineering competence, not polish.

Know

  • The platform moved fast: container queries, :has(), cascade layers, nesting, @scope, subgrid, color-mix() and oklch(), text-wrap: balance, @starting-style, scroll-driven animations and view transitions are Baseline; anchor positioning became Baseline Newly available in January 2026; the CSS if() function is shipping but not yet Baseline. Knowing what is safe to use without a fallback is part of the answer.
  • Architecture is about ownership. Scoped SFC styles, CSS Modules, utility-first with Tailwind v4's CSS-first configuration, and design tokens as custom properties each answer "who may change this style" differently. The Nuxt UI approach (Tailwind variants plus app.config tokens) is what most Nuxt teams inherit.
  • Responsive means adaptive: fluid type with clamp(), container queries over media queries for components, dvh units, safe-area insets, reduced motion and contrast preferences, pointer capability queries, and reserved space so nothing shifts.
  • Accessibility is testable: WCAG 2.2 AA is the target most contracts name; semantic HTML gives most of it for free, ARIA repairs what HTML cannot express, keyboard and focus management is where component libraries earn their keep, and axe, Lighthouse, Playwright's role-based locators and a screen reader session make it verifiable.
  • In Vue and Nuxt the primitives exist: useId for associations, Reka UI underneath Nuxt UI for keyboard and focus behaviour, <NuxtRouteAnnouncer> and <NuxtAnnouncer> for live regions, usePreferredReducedMotion from VueUse, and @axe-core/playwright in end-to-end tests.

How the pages fit

PageQuestion it answers
Cascade, layout and modern CSS"What is new in CSS that you actually use?" and "why does this style not apply?"
CSS architecture and Tailwind"How do you organise styles in a large Vue app?"
Responsive and adaptive design"How do you build for phones, foldables, dark mode and reduced motion at once?"
Accessibility fundamentals"What does WCAG 2.2 require and how do you test it?"
Accessible components in Vue"Build an accessible modal / combobox / tabs"

How it works

The modern CSS a Nuxt component ships in 2026, in one stylesheet:

app/assets/css/card.css
@layer components {
  .card {
    container-type: inline-size;              /* the card sizes its own children */
    background: color-mix(in oklch, var(--ui-bg) 92%, var(--ui-primary));
    padding: clamp(0.75rem, 2cqi, 1.5rem);
    text-wrap: balance;

    &:has(img) { display: grid; grid-template-rows: subgrid; } /* nesting + :has() */
    @container (min-width: 32rem) { grid-template-columns: 1fr 2fr; }

    .title { color: light-dark(var(--ui-text), var(--ui-text-inverted)); }
  }

  .card-menu[popover] {
    position-anchor: --card-trigger;           /* anchor positioning: Baseline since January 2026 */
    position-area: bottom span-right;
    @starting-style { opacity: 0; translate: 0 -0.25rem; }
    transition: opacity 0.15s, translate 0.15s, display 0.15s allow-discrete;
  }
}
Gotcha· Treating accessibility as a checklist item at the end

Retrofitting focus management, labels and live regions onto a finished UI costs several times more than building with semantic elements and a headless primitive library from the start. Interviewers ask "when do you think about accessibility" and the only good answer is "when choosing the element".

Exercise

Exercise
  • Open a component you shipped this year and list every CSS feature it uses; check each against Baseline and note which ones you avoided out of habit rather than support.
  • Run axe DevTools on one page of a project you own and fix the top three issues; time how long each took.

Be able to say

Be able to say· How current is your CSS and accessibility knowledge?

"Current enough to use the 2026 platform without a framework hiding it: container queries, :has(), cascade layers, nesting, @scope, color-mix and oklch, view transitions, and anchor positioning now that it is Baseline. I structure styles by ownership, tokens as custom properties, scoped or utility classes per component, layers for the order, and I treat accessibility as an engineering requirement: WCAG 2.2 AA as the target, semantic elements first, a headless primitive library for keyboard and focus behaviour, and axe plus a screen reader pass in the definition of done, which the European Accessibility Act made a legal matter for many products in 2025."

Pages in this section

  1. 01Cascade, layout and modern CSSSpecificity and cascade layers, custom properties and logical properties, flexbox versus grid and subgrid, container queries, :has(), nesting and @scope, modern colour, view transitions, anchor positioning, popover and dialog, and the Baseline vocabulary for support.
  2. 02CSS architecture and Tailwind v4Ownership models for styles — scoped SFC styles, CSS Modules, utility-first with Tailwind v4's CSS-first configuration, design tokens as custom properties, theming and dark mode, how Nuxt UI composes Tailwind variants with app.config tokens, and what happened to BEM and CSS-in-JS.
  3. 03Responsive and adaptive designMobile-first with fluid type and spacing, container queries over media queries for components, viewport units and safe areas, touch targets and pointer queries, user preference queries for motion, contrast and colour scheme, images that do not shift layout, and print.
  4. 04Accessibility fundamentalsWCAG 2.2 and its new criteria, the European Accessibility Act, semantic HTML first, the rules of ARIA, keyboard and focus management, forms and errors, colour and motion, screen reader testing, and the tooling that makes accessibility verifiable.
  5. 05Accessible components in Vue and NuxtBuilding the widgets that go wrong most — modal dialogs, comboboxes, tabs, menus, toasts, forms — with Reka UI and Nuxt UI or by hand following the ARIA Authoring Practices, plus route announcements, focus on navigation, reduced motion, and testing with role-based locators.

Your notes

Open in Notes

Nothing yet. Notes filed here show up on every page of this section.

Typing patterns and smells

[object Object]

Cascade, layout and modern CSS

Specificity and cascade layers, custom properties and logical properties, flexbox versus grid and subgrid, container queries, :has(), nesting and @scope, modern colour, view transitions, anchor positioning, popover and dialog, and the Baseline vocabulary for support.