HTML & CSS Interview Question #148

How would you organize CSS for a large application?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

A large application benefits from predictable layers and clear ownership. A practical structure may separate design tokens, reset/base rules, layout primitives, reusable components, page-specific styles, and small utilities. The exact folder structure matters less than having consistent boundaries.

Detailed Explanation

A large application benefits from predictable layers and clear ownership. A practical structure may separate design tokens, reset/base rules, layout primitives, reusable components, page-specific styles, and small utilities. The exact folder structure matters less than having consistent boundaries.

Keep selectors relatively low in specificity, avoid styling components through fragile deep DOM paths, and define reusable values with custom properties. Cascade layers, component naming conventions, CSS Modules, or another scoping strategy can help depending on the technology stack.

Remove obsolete styles as components change, document important conventions, and ensure responsive, accessibility, and theme behavior are considered within each component rather than added as unrelated patches later.

Code Example

@layer reset, base, layout, components, utilities;

@layer base {
    :root {
        --space-md: 1rem;
        --radius-md: .75rem;
    }
}

@layer components {
    .interview-card {
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }
}

@layer utilities {
    .u-hidden {
        display: none;
    }
}