Concepts in CSS & Design Systems, page 2
CSS box-shadow: Creating Depth and Elevation
box-shadow fakes depth by casting a shadow from an element's frame. It's used to elevate UI like cards and modals or create inner shadows for pressed states. The footgun: omitting the color causes it to inherit the parent's text color, not black.
CSS text-shadow: Adding Depth and Legibility to Text
The text-shadow property adds depth to text, like casting a shadow from a light source. Use it for subtle emphasis, letterpress effects, or to make text readable on busy backgrounds. The footgun: not setting a color, as browser defaults vary widely.
Stacking Multiple Backgrounds in CSS
Think of CSS backgrounds as a stack of transparent sheets where the first image listed is on top. This lets you layer logos over gradients or combine patterns without extra HTML. The footgun: the first image in the code is the frontmost on screen.
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 Flexbox: Mastering the Main and Cross Axis
Flexbox treats layout as a one-dimensional problem: either a row or a column. All alignment rules operate along a 'main axis' and a perpendicular 'cross axis'. Use it for navbars or card components.
CSS Grid: Defining a 2D Layout Container
Turn an element into graph paper with display: grid, making its children items you can place in rows and columns. It's ideal for page-level layouts or complex components. The footgun: grid properties only apply to direct children, not nested elements.
The `gap` Property: Spacing Without Margin Hacks
The gap property adds space *between* elements in a layout, not around them. Use it on Flexbox, Grid, or multi-column containers for clean, consistent gutters.
CSS Grid: Placing Items on the Grid
Think of CSS Grid as a coordinate system for your layout. You can explicitly place items using line numbers or named areas, or let the browser auto-place them. This is key for page scaffolds and galleries. Footgun: Grid lines are numbered from 1, not 0.
CSS Grid-Template-Areas: Draw Your Layout in CSS
CSS grid-template-areas lets you visually "draw" your layout by naming cells in a string matrix. It's ideal for defining page structures like headers and sidebars. The biggest footgun: named areas must form a perfect rectangle, or the layout breaks.
CSS Logical Properties: Layout That Speaks Every Language
Think 'start/end' not 'left/right'. CSS Logical Properties adapt your layout to the user's writing direction, from English to Arabic. Use padding-inline-start instead of padding-left for robust, internationalized sites.
CSS minmax(): Flexible Sizing for Grid Tracks
The minmax() function gives a grid track a minimum and maximum size, like a rubber band that stretches but won't snap. Use it in CSS Grid to create columns that grow with the viewport but never shrink below a readable width.
CSS aspect-ratio: Maintain Shape in Responsive Layouts
The aspect-ratio property sets a box's width-to-height ratio, making it maintain its shape as its container resizes. It's ideal for responsive video embeds or uniform grid items. The footgun: it has no effect if both width and height are fixed values.
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.
The @media Rule: CSS for Different Screens
The @media rule is like an if-statement for your CSS, applying styles only when conditions like screen size are met. It's the core of responsive design, creating different layouts for mobile, tablet, and desktop.
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