The @import CSS at-rule is used to import style rules from other style sheets. While it can seem convenient, its use has implications for performance and loading.
When to use and avoid @import
The @import rule allows you to include external CSS files directly within another CSS file. It's best used for small, modular stylesheets that are not critical for the initial page render, or within component-specific stylesheets in a larger architecture. However, generally, it's advisable to avoid @import for critical stylesheets due to performance drawbacks, such as delaying parallel downloads and increasing the number of HTTP requests.
Example 1: Basic @import
/* style.css */
@import url("reset.css"); /* Imports a basic CSS reset for consistent styling across browsers. */
body {
font-family: Arial, sans-serif; /* Sets a common font for the body. */
margin: 0; /* Removes default body margin. */
}
Explanation This example demonstrates the most basic usage of @import to pull in a reset.css file. This ensures that browser default styles are normalized before applying custom styles, a common practice for consistent design.
Example 2: @import with Media Queries
/* main.css */
@import url("mobile.css") screen and (max-width: 600px); /* Imports mobile-specific styles only for screens up to 600px wide. */
@import url("desktop.css") screen and (min-width: 601px); /* Imports desktop styles for screens wider than 600px. */
h1 {
color: navy; /* Defines a default color for all h1 elements. */
}
Explanation Here, @import is used with media queries to conditionally load stylesheets based on screen size. This allows for a responsive design approach, serving optimized styles to different devices and improving initial page load for non-matching media.
Example 3: @import for Theming
/* theme-dark.css */
body {
background-color: #333; /* Sets a dark background for the theme. */
color: #f5f5f5; /* Sets a light text color for contrast. */
}
/* main-app.css */
@import url("theme-dark.css"); /* Imports the dark theme stylesheet. */
.button {
padding: 10px 20px; /* Styles a generic button. */
border-radius: 5px; /* Adds rounded corners to buttons. */
}
Explanation This example illustrates using @import for thematic purposes, allowing you to easily swap out or include different theme stylesheets. This can be beneficial for managing multiple visual styles within a single application.
Example 4: Nesting @import (Generally Avoid)
/* components/card.css */
.card {
border: 1px solid #ccc; /* Defines a border for a card component. */
padding: 15px; /* Adds internal spacing to the card. */
}
/* layout/grid.css */
@import url("../components/card.css"); /* Imports the card styles into the grid layout. */
.grid-container {
display: grid; /* Establishes a CSS Grid layout. */
gap: 20px; /* Sets spacing between grid items. */
}
Explanation While technically possible, nesting @import rules (importing a CSS file that itself imports another CSS file) is generally discouraged. It can lead to inefficient loading and make the cascade harder to manage, negatively impacting CSS performance.
Example 5: Avoiding @import for Critical CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimized CSS Loading</title>
<link rel="stylesheet" href="critical.css"> <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'"> </head>
<body>
<h1>Welcome</h1>
<p>This page demonstrates optimized CSS loading without @import for critical styles.</p>
</body>
</html>
Explanation This example demonstrates the recommended approach for loading critical CSS, which is to use <link> tags directly in the HTML. This allows browsers to download stylesheets in parallel, improving the "First Contentful Paint" (FCP) and overall page load speed.