Senior LevelCSS & Modern Layouts
Why is @import considered a performance anti-pattern and what are the alternatives?
❓ Interview Prompt: Explain how @import creates sequential network waterfalls and how to avoid them.
@import in CSS creates sequential dependency chains: the browser must download, parse, and execute the first stylesheet before discovering and downloading imported stylesheets.
The Problem:
```
style.css → @import 'layout.css' → @import 'components.css'
```
Each import creates a new network request that blocks the next — a waterfall that dramatically increases load time.
Alternatives:
1
Multiple `<link>` tags: Browser discovers and downloads all stylesheets in parallel.
2
CSS bundler: Concatenate files at build time (Vite, webpack, PostCSS).
3
@layer @import: Modern browsers may optimize
@import within @layer declarations, but parallel <link> tags remain faster.Code Implementation Example
html
<!-- ❌ @import creates sequential waterfall -->
<style>
@import url('reset.css');
@import url('layout.css');
@import url('components.css');
</style>
<!-- ✅ Parallel downloads with multiple <link> tags -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="components.css">💡Sequential @import waterfall vs parallel <link> tag downloads.
🎯 Interview Key Takeaway
Replace @import with multiple <link> tags or a CSS bundler to enable parallel stylesheet downloads.
#@import#Performance#Network#Senior
Back to all CSS & Modern Layouts Questions→