@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 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
Using multiple link tags
Each CSS can be downloaded by a separate
link tag as following:
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="components.css">
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.