Avoid using CSS @import

Written byPhuoc Nguyen

Tags

CSS

Created

21 Mar, 2021

The `@import` function allows us to include styles from an external file. It's very useful when our project has a lot of styles. Instead of creating a single file to define all styles, we can split them into multiple files and compose them in a master file.

/* The main file */
@import 'common.css';
@import 'components.css';
@import 'pages.css';
...

Using `@import` makes our styles more organized and easier to maintain. However, the browser has to download and parse each CSS file one by one before continuing rendering the page. The CSS files are downloaded sequentially instead of parallelly.

It also can slow down the website depending on how many the number of CSS files are.

There are a few ways to get rid of the issues while the styles are still organized.

Using CSS preprocessors

We can use CSS preprocessors such as Less, SASS. They not only provide the ability of using `@import` as normal CSS, but also merge styles in a single, final CSS file.

Using multiple link tags

Each CSS can be downloaded by a separate `link` tag as following:

<head>
    <link rel="stylesheet" type="text/css" href="common.css" />
    <link rel="stylesheet" type="text/css" href="components.css" />
    ...
</head>

Good to know

In the old versions of Internet Explorer, the `@import` function behaves the same as the target CSS is inserted at the bottom of the page

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Avoid using CSS @import

Using CSS preprocessors

Using multiple link tags

Questions? 🙋

Recent posts ⚡

Newsletter 🔔