Advanced concepts in CSS & Design Systems
CSS Pseudo-elements: Styling Parts of an Element
Pseudo-elements style parts of an element not in the DOM, like a paragraph's first line or selected text. Use ::before/::after for decorative content or ::selection to style user highlights.
CSS Stacking Contexts: The Z-Axis Explained
A CSS stacking context is like a self-contained group of layers. Elements inside only compete for z-index with siblings in that same group. They're created by properties like position with z-index, opacity, or transform.
Block Formatting Context: Taming Floats and Margins
A Block Formatting Context (BFC) is a mini-layout sandbox on your page, isolating its contents. Use it to contain child floats that would otherwise overflow their parent, or to stop adjacent elements from collapsing their margins.
CSS Containing Block: The Box That Defines Your Box
An element's size and position are calculated relative to its containing block, not always its direct parent. This determines how percentage widths are resolved and provides the reference for position: absolute.
Variable Fonts: One File, Infinite Styles
Variable fonts pack an entire typeface's variations—from thin to bold, condensed to wide—into a single file. This avoids multiple HTTP requests for different font weights, giving you a continuous range of styles with CSS.
CSS Filter: Photoshop-like Effects in the Browser
The filter property brings Photoshop-like graphical effects directly into CSS. Use it for image adjustments like blur() or contrast(), or for complex shadows with drop-shadow(). The order of chained filters matters, as they are applied sequentially.
CSS Blend Modes: Photoshop Effects in the Browser
Think Photoshop layer effects, but in CSS. Blend modes define how overlapping element colors interact—multiplying or screening them for rich effects. Use them for text knockouts on images or complex background textures.
CSS clip-path: Break Out of the Box
Use clip-path to create non-rectangular layouts by defining a visible region, like a cookie cutter for your elements. It's perfect for complex UI shapes like chevrons or circles without extra image files. The footgun: complex shapes have tricky syntax.
backdrop-filter: Styling What's Behind an Element
Think of backdrop-filter as frosted glass for your UI. It applies graphical effects like blur to the content *behind* an element. It's ideal for overlays like modals or navigation bars to improve legibility.
CSS Grid: auto-fit vs. auto-fill
Create responsive grids without media queries. auto-fill creates as many columns as fit, leaving empty ones. auto-fit collapses empty columns, letting content stretch to fill the space. The footgun is using auto-fill when you want items to grow.
CSS Subgrid: Aligning Nested Grids
CSS Subgrid lets a nested grid borrow its parent's column or row tracks, solving the classic problem of aligning items inside components. This ensures elements within multiple cards, for example, line up perfectly.
CSS Container Queries: Style Components, Not Just Pages
Container queries let components respond to their own size, not the viewport's. Use them for cards or sidebars that must adapt to different layouts. The footgun: you must first declare a parent as a "containment context" with container-type for it to work.
CSS clamp(): Fluid Sizing in One Line
The CSS clamp() function sets a value that scales between a minimum and maximum, like a thermostat for CSS properties. It's ideal for fluid typography, letting font-size grow with the viewport but not beyond set limits.
Media Queries: CSS That Adapts to the User's Device
Instead of one-size-fits-all CSS, media queries let your styles react to the user's device. They are used to change layouts for different screen widths, orientations, or display resolutions. The footgun is only testing for width, ignoring other factors.
Intrinsic Web Design: Components That Style Themselves
Intrinsic Web Design lets components style themselves based on their container, not the whole page. Instead of just viewport media queries, use container queries to make a component adapt to a wide content area or a narrow sidebar, making it truly reusable.
CSS `will-change`: A Performance Hint, Not a Magic Wand
will-change tells the browser which properties you'll animate, letting it optimize rendering ahead of time. Use it to fix jank in complex transitions, but never apply it preemptively—overuse wastes memory and can make performance worse.
Hardware Acceleration: Getting Smooth CSS Animations
Use the GPU for smooth CSS animations by sticking to transform and opacity. This avoids costly CPU work like layout recalculations, keeping frame rates high. The footgun is animating properties like width or left, which cause jank.
CSS transform-style: Let Children Live in 3D Space
The transform-style property decides if an element's children are flattened onto its 2D plane or share a 3D space. Use preserve-3d to create nested 3D objects. Beware: properties like opacity < 1 or overflow will break the 3D context and flatten it.
CSS Motion Path: Animate on a Curve
Think of offset-path as drawing a track for an element to follow. Use it for non-linear UI animations, like an icon following a curve. The footgun: the path itself doesn't cause motion; you must also animate offset-distance to move the element.
Scroll-driven Animations: Animate on Scroll, Not Time
Scroll-driven animations link an animation's progress to a scrollbar's position, not a clock. This is great for progress bars that fill as you scroll or elements that fade in as they enter the viewport. The main pitfall is confusing timeline types.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles