How to avoid CSS@import? What is it and Why is Required?

Cascading style sheets (CSS) is a style sheet language which is used to describe the look and formatting of the web page.

What is CSS@import?

It is a process of importing CSS file into another CSS file. It is an external stylesheet. Here is the example of CSS@import.

<style>

@import url(B.css) ;

</style>

Why avoid CSS@import?

It causes additional HTTP requests for server and browser which increases the page load time.

The delay in page load occurs because the files are downloaded in a sequential manner (this means one after the other) instead of downloading parallelly. The sequential loading adds additional round trip times to the overall page and thus slows down the web page as per the number of CSS files imported.

Positions of CSS@import?

CSS @ import can be added in both CSS files and HTML pages.

Usage in CSS files
- It can be located at the top of the page. Here is the example of the script:

@import url(“style2.css”)

Usage in HTML files
- It is used in the style tags. Here is an example:

<style type=”text/css”>

@import url(“style2.css”);

font-family: sans serif;

font-size: 17px;

font-weight: 300;

# more CSS scripts #

</style>

How to avoid CSS@import?

This problem can be fixed using one of three methods:

#Method 1: By combining CSS files

One method is that you can merge the files. This means you can simply copy and paste the files you were importing, directly into the original file. This will remove the need to import the file.

Another way is that you can add a separate link in the header of HTML instead of adding CSS@import.

#Method 2: By using inline CSS in HTML

If the CSS is inlined in the HTML, this reduces the unnecessary sequential loading of the page.

<img src="picture.jpg" /><script type=“text/css”>…CSS script goes here…</script>

#Method 3: By using link tag in the HTML

If the link tag is used in the header of HTML instead of using CSS@import, this also helps in reducing the problem.

<link href=”style2.css” rel=” stylesheet” type=”text/css”>

Conclusion

This article explains why CSS@import is bad for the page speed, including the additional steps that are added for the browser to load the web page. Moreover, it causes the browser to download, parse and then go out and get the next CSS file before it starts displaying the page.

The best practice is to use not even a single @import.

How to Avoid CSS@import? What is it and Why is Required?