Avoid using CSS @import
Written byPhuoc Nguyen
Created
21 Mar, 2021
Category
Practice
Tags
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.css
/* 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:html
<head>
<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="components.css" />
...
</head>Good to knowIn 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 about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
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