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.
@import url(B.css) ;
Why to 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 the sequential manner (this means one after the other) instead of downloading parallely. The sequential loading adds additional round trip times to the overall page and thus slows down the web page as per the amount 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:
- Usage in HTML files
- It is used in the style tags. Here is the example:
font-family: sans serif;
# more CSS scripts #
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.
<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”>
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 practise is to use not even a single @import.