Phase 11Advanced12 of 12 in CSS

Modern CSS and Architecture

Write CSS like a senior: native nesting, :has(), theming and dark mode, naming and layers, tooling, debugging, accessible CSS and model interview answers.

You can now style and lay out almost anything. This phase is about writing CSS that stays good as a project grows, and about the newest features that change how CSS is written: native nesting, the **:has() "parent selector", and light-dark()** for themes. You'll learn the real rules behind each one, including the surprising specificity of nested selectors.

Then you'll step back and look at CSS as a codebase: how teams name and organise styles (BEM, utility-first, component styles, cascade layers, resets), what tools like Sass, PostCSS, Autoprefixer and Tailwind really do, how to debug any layout bug with DevTools in a calm, repeatable way, and how to make CSS accessible: contrast, focus styles, visually hidden text, forced colours and reduced motion.

The phase ends with the CSS interview questions asked most often (specificity, the box model, Flexbox vs Grid, positioning, block formatting contexts) with model answers you can say out loud. It builds on everything before it, especially Phase 1 (selectors), Phase 2 (the cascade and layers), Phase 3 (custom properties and colour), Phase 9 (user preference queries) and Phase 10 (animation). Every example is live.

0/8 · 0%

8 topics ~3 h 28 code blocks & diagrams

Start with the first topic

11.1

CSS Nesting

Native CSS nesting lets you write a rule inside another rule, so styles for a component and its parts live together; & stands for the parent selector, and every nested selector behaves as if the parent were wrapped in :is(), which decides its specificity.

28 min 1 diagram 3 code practice

11.2

:has() in Practice

:has() matches an element when something inside it, or after it, matches the selector you give; that lets CSS style a form from the state of its inputs, a parent from its children, and a list from how many items it has, all without JavaScript.

27 min 3 code practice

11.3

Theming and Dark Mode

A theme is a set of custom properties (colour tokens) that every component reads; dark mode swaps those values, color-scheme tells the browser to draw its own parts dark too, light-dark() picks a value per scheme, and prefers-color-scheme follows the user's system setting.

27 min 3 code practice

11.4

Organising CSS

Large CSS stays manageable when every rule has an obvious home and predictable strength: a reset or normalise base, components named with a convention like BEM or scoped by a tool, optional utility classes, and cascade layers that fix the order between them.

22 min 4 code practice

11.5

Preprocessors and Tooling

Build tools transform the CSS you write into the CSS browsers download: Sass adds variables, mixins and nesting before the browser sees it, PostCSS runs plugins such as Autoprefixer, Tailwind generates utility classes from your markup, and minifiers make the final file as small as possible.

21 min 4 code practice

11.6

Debugging CSS

Debugging CSS is a routine, not guesswork: inspect the element, check whether the rule matches and wins, read the computed value and the box model, use the Flexbox and Grid overlays, and know the handful of bugs that cause most layout problems.

22 min 3 code practice

11.7

Accessible CSS

CSS decides whether people can read, see where they are, and use a page comfortably: give text enough contrast, keep a clear focus indicator, hide text visually without hiding it from screen readers, survive forced-colours mode, and calm motion for people who ask for less.

28 min 3 code practice

11.8

CSS Interview Questions

The CSS questions interviewers ask most (specificity, the box model, Flexbox vs Grid, positioning and block formatting contexts) each have a short, precise model answer; learn the answer, the example that proves it, and the follow-up they usually ask next.

26 min 4 code practice