← #104 Early return

Avoid using CSS @import

Topics: CSS

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:

<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.

Fix a typo or suggest an improvement
#106 Load given characters in a Google font request